@byteclaw/forms
Easily built forms in React using Hooks API
Last updated 19 days ago by michalkvasnicak .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @byteclaw/forms 
SYNC missed versions from official npm registry.

@byteclaw/forms

CircleCI All Contributors Version License

Easily create complex forms in React.

Installation

npm install @byteclaw/forms

# or using yarn

yarn add @byteclaw/forms

Yup compatibility

This library supports Yup validation library. In order to use it please install Yup because it isn't a part of this library.

Requirements

  • react >= 16.8.3

Up and running example

import { Fragment } from 'react';
import {
  ArrayField,
  Field,
  Form,
  FormProvider,
  ObjectField,
  createValidatorFromYup,
} from '@byteclaw/forms';
import * as yup from 'yup';

const validator = createValidatorFromYup(
  yup.object().shape({
    productTitle: yup.string().required(),
    images: yup
      .array()
      .of(
        yup.object().shape({
          title: yup.string().required(),
          url: yup
            .string()
            .url()
            .required(),
        }),
      )
      .required(),
    attributes: yup.object().shape({
      color: yup
        .string()
        .matches(/^#[0-9a-fA-F]{6}$/)
        .required(),
    }),
  }),
);

<Form onSubmit={async values => {}} onValidate={validator}>
  {/* global error of form */}
  <FieldError>{({ error }) => error || null}</FieldError>
  <Field name="productTitle" />
  <FieldError name="productTitle">{({ error }) => error || null}</FieldError>
  <ArrayField name="images">
    {({ value }, dispatch) => (
      <Fragment>
        {/* value can be undefined/null if is not initialized */}
        {(value || []).map((val, i) => (
          <ObjectField name={i}>
            <Field name="url" type="url" />
            <FieldError name="url">{({ error }) => error || null}</FieldError>
            <Field name="title" />
            <FieldError name="title">{({ error }) => error || null}</FieldError>
            <button onClick={() => removeItem(i)} type="button">
              Remove
            </button>
          </ObjectField>
        ))}
        <button onClick={() => dispatch({ type: 'CHANGE', value: [...value, {}] })} type="button">
          Add image
        </button>
      </Fragment>
    )}
  </ArrayField>
  <FieldError name="images">{({ error }) => error || null}</FieldError>
  <ObjectField name="attributes">
    <Field name="color" />
    <FieldError name="color">{({ error }) => error || null}</FieldError>
  </ObjectField>
  <FieldError name="attributes">{({ error }) => error || null}</FieldError>
  <FormProvider>
    {form => (
      <button disabled={form.status !== 'IDLE'} type="submit">
        Save
      </button>
    )}
  </FormProvider>
</Form>;

API

Form

Form component is a root component necessary to use Forms at all. It provides a context for all fields in a given form.

Form accepts onValidate, onSubmit and validateOnChange props along with standard attributes accepted by <form />.

  • onValidate<TValues>(values?: TValues): Promise<TValues | void>
    • optional validation function
    • in case of an error please throw ValidationError provided by this library
  • onSubmit<TValues>(values: TValues): Promise<void>
    • optional submit function
    • it can validate form too, in case of an error throw ValidationError provided by this library
  • onChange<TValues>(values: TValues): Promise<void>
    • optional on change function
  • validateOnChange
    • default is false
    • optional
    • will validate form on change

FormProvider

FormProvider is a way to connect to FormState when you need to react on something.

  • children: (state: FormState) => any

Field

Field is a base component to construct simple widgets using <input /> elements. On change is debounced.

FieldError

FieldError is a base component if you want to render validation errors that are connected with a specific field or a form root.

To connect to a root of ObjectField/ArrayField/Form use it like this:

<FieldError name="">{err => JSON.stringify(err, null, ' ')}<FieldError>

Or specify name as a name that was used by Field component.

ArrayField

ArrayField is a base component to construct complex fields for array values.

ObjectField

ObjectField is a base component to construct nested objects in your form.

ValidationError

ValidationError is a way how to map errors to fields in your form.

useArrayField

useDebouncedCallback

useError

useForm

useField

useFormState

useObjectField

useParentField

useValues

createValidationErrorFromYup

validationErrorFromYupError

Examples

Contributors


Michal Kvasničák

???? ???? ???? ???? ???? ???? ???? ⚠️

Juraj Hríb

???? ???? ???? ???? ???? ????

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT License

Current Tags

  • 1.0.0-alpha.12                                ...           alpha (6 months ago)
  • 1.2.0                                ...           latest (19 days ago)

30 Versions

  • 1.2.0                                ...           19 days ago
  • 1.1.2                                ...           19 days ago
  • 1.1.1                                ...           19 days ago
  • 1.1.0                                ...           5 months ago
  • 1.0.4                                ...           5 months ago
  • 1.0.3                                ...           5 months ago
  • 1.0.2                                ...           5 months ago
  • 1.0.1                                ...           5 months ago
  • 1.0.0                                ...           6 months ago
  • 1.0.0-alpha.12                                ...           6 months ago
  • 1.0.0-alpha.11                                ...           6 months ago
  • 1.0.0-alpha.10                                ...           6 months ago
  • 1.0.0-alpha.9                                ...           6 months ago
  • 1.0.0-alpha.8                                ...           6 months ago
  • 1.0.0-alpha.7                                ...           6 months ago
  • 1.0.0-alpha.6                                ...           7 months ago
  • 1.0.0-alpha.5                                ...           7 months ago
  • 1.0.0-alpha.4                                ...           7 months ago
  • 1.0.0-alpha.3                                ...           7 months ago
  • 1.0.0-alpha.2                                ...           7 months ago
  • 1.0.0-alpha.1                                ...           7 months ago
  • 1.0.0-alpha.0                                ...           7 months ago
  • 0.9.0                                ...           7 months ago
  • 0.8.5                                ...           a year ago
  • 0.8.4                                ...           a year ago
  • 0.8.3                                ...           a year ago
  • 0.8.2                                ...           a year ago
  • 0.8.1                                ...           a year ago
  • 0.8.0                                ...           a year ago
  • 0.7.0                                ...           a year ago
Downloads
Today 0
This Week 30
This Month 85
Last Day 0
Last Week 0
Last Month 27
Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |