Easily built forms in React using Hooks API
npm install @byteclaw/forms

!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
``console
npm install @byteclaw/forms
#Β or using yarn
yarn add @byteclaw/forms
`
This library supports Yup validation library. In order to use it please install Yup because it isn't a part of this library.
- react >= 16.8.3
`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(),
}),
}),
);
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
- optional validation function
- in case of an error please throw ValidationError provided by this library
- onSubmit
- optional submit function
- it can validate form too, in case of an error throw ValidationError provided by this library
- onChange
- optional on change function
- validateOnChange
- default is false
- 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.
|
Michal KvasniΔΓ‘k
π¬ π» π¨ π π‘ π€ π β οΈ |
Juraj HrΓb
π¬ π π» π π€ π |
| :---: | :---: |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT License