npm install @byteclaw/forms

@byteclaw/forms

![CircleCI](https://circleci.com/gh/Byteclaw/forms)
![All Contributors](#contributors)
!Version
!License

Easily create complex forms in React.

- Installation
- Yup compatibility
- Requirements
- Up and running example
- API
- Form
- Field
- FieldError
- ArrayField
- ObjectField
- ValidationError
- useArrayField
- useDebouncedCallback
- useError
- useField
- useForm
- useFormState
- useObjectField
- useParentField
- useValues
- createValidatorFromYup
- validationErrorFromYupError
- Examples
- Contributions

Installation

``console 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`

`js 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(), }), }), );

 {}} onValidate={validator}>
  {/ global error of form /}
  {({ error }) => error || null}
  
  {({ error }) => error || null}
  
    {({ value }, dispatch) => (
      
        {/ value can be undefined/null if is not initialized /}
        {(value || []).map((val, i) => (
          
            
            {({ error }) => error || null}
            
            {({ error }) => error || null}
            
          
        ))}
        
      
    )}
  
  {({ error }) => error || null}
  
    
    {({ error }) => error || null}
  
  {({ error }) => error || null}
  
    {form => (
      
    )}
  
;


API
$3

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

.

- onValidate(values?: TValues): Promise- optional validation function - in case of an error please throwValidationErrorprovided by this library -onSubmit(values: TValues): Promise- optional submit function - it can validate form too, in case of an error throwValidationErrorprovided by this library -onChange(values: TValues): Promise- optional on change function -validateOnChange- default isfalse- optional - will validate form on change

`$3`

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

- children: (state: FormState) => any

`$3`

Field is a base component to construct simple widgets using elements. On change is debounced.

`$3`

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:

`jsx {err => JSON.stringify(err, null, ' ')}`

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

`$3`

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

`$3`

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

`$3`

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

$3

Examples

- Simple Form

Contributors

|
_{Michal Kvasničák}
💬 💻 🎨 📖 💡 🤔 👀 ⚠️ |
_{Juraj Hríb}
💬 🐛 💻 📖 🤔 👀 |
| :---: | :---: |

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

License

MIT License

npm install @byteclaw/forms

@byteclaw/forms

![CircleCI](https://circleci.com/gh/Byteclaw/forms)
![All Contributors](#contributors)
!Version
!License

Easily create complex forms in React.

Installation

``console 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`

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

{}} onValidate={validator}> {/ global error of form /} {({ error }) => error || null} {({ error }) => error || null} {({ value }, dispatch) => ( {/ value can be undefined/null if is not initialized /} {(value || []).map((val, i) => ( {({ error }) => error || null} {({ error }) => error || null} ))} )} {({ error }) => error || null} {({ error }) => error || null} {({ error }) => error || null} {form => ( )} ;`

`API`

`$3`

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

.

`$3`

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

- children: (state: FormState) => any

`$3`

Field is a base component to construct simple widgets using elements. On change is debounced.

`$3`

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:

`jsx {err => JSON.stringify(err, null, ' ')}`

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

`$3`

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

`$3`

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

`$3`

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

$3

Examples

- Simple Form

Contributors

|
_{Michal Kvasničák}
💬 💻 🎨 📖 💡 🤔 👀 ⚠️ |
_{Juraj Hríb}
💬 🐛 💻 📖 🤔 👀 |
| :---: | :---: |

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

License

MIT License

Dist Tags

latest1.2.0

alpha1.0.0-alpha.12