A declarative form component with inbuilt validation and state management
npm install react-form-package
!npm bundle size (minified + gzip)
> A declarative form component with inbuilt validation and state management
* Documentation
* Installation
* Simple Form
* Components
* Form
* Button
* Field
* FieldWrapper
* RadioGroup
* Select
* Form Validation
* State
* State Manipulation
* Custom Error Messages
* Show Errors on Button Click
* Feedback on Disabled Button
* Styling
* Dynamic Fields
* Dynamic Fields 2
* Add new Fields onClick
* Add new Fields onChange
* Dynamic Fields 3
* Bind Input Fields
* Bind Input Fields 2
* onFocus, onChange, onBlur
* Third Party Components
* Autocomplete with Downshift
* File Upload
* Why?
* License
``sh`
$ npm i react-form-package -S
or
`sh`
$ yarn add react-form-package
> For more detailed information you can take a look at the documentation
There are five (six) different components within this package. The component is only here for edge cases, e.g. working with third party components. So for this simple example we stick to these five:
`jsx`
import {
Button,
Field,
Form,
RadioGroup,
Select,
} from 'react-form-package';
If you are familiar with writing HTML forms than you are all set up. There are no complex data props or functions that you have to call before you can set up a form and validate its input like in most other libraries. Why should you care about writing the validations for your form yourself? An email, a date, a url, and so on, will always have the same structure. react-form-package will not only help you by your forms state management, it also will help you validating your forms correctly.
* Every
In this example we use all components and types this library supports:
`jsx`
const myForm = (props) => (
>
checkbox
textarea
date
datetime-local
email
number
tel
text
password
time
url
select
radio
radio 1
radio 2
radio 3
);
For more detailed information you can take a look at the documentation.
This component is a wrapper for all the other components in this library. This component handles the global state for the form itself.
#### Basic Usage
> For more detailed information you can take a look at the documentation
Render a table.
`jsx
import { Form } from 'react-form-package';
const myForm = (props) => (
#### Props
Property | Type | Required | Default | Description
---|---|---|---|---
validate| Bool | false | |
validateOnClick| Bool | false | If you want to show the errors of a form on the click of the button |
input | Element |
| |
checkbox | Element | | |
radio | Element | | |
radioContainer | Element | | | The Element that wraps the radio elements.
button | Element | | |
select | Element | | |
textarea | Element | | |
error | Element | | |$3
This component has to be a child within the
component. This component gets the state from the component and returns it on its onClick prop. If the component has the validate prop set, the button will be disabled as long as the form is valid.#### Basic Usage
> For more detailed information you can take a look at the documentation
Render a
with a component.`jsx
import {
Form,
Button,
} from 'react-form-package';const myForm = (props) => (
);
`#### Props
Property | Type | Required | Default | Description
---|---|---|---|---
id | String | true | |
type | String | true | |
onClick | Func | false | | returns the state of the form
onMouseEnter | Func | false | | returns the event and the state of the form
onMouseLeave | Func | false | | returns the event and the state of the form (does not work on buttons)
rfpRole | String | false | | only needed for dynamically added fields, either addField or removeField
fieldId | String | false | | only needed for dynamically added fields on a button with rfpRole (the id of the field to remove)
field | Object | false | | only needed for dynamically added fields on a button with rfpRole addField. This object holds at least id, type, and may hold min, max, required, match, sameAs$3
This component has to be a child within the
component. This component handles its own state and on any state change it will report it to the component which validates the whole form.#### Basic Usage
> For more detailed information you can take a look at the documentation
Render a
with an email and a component.`jsx
import {
Form,
Field,
} from 'react-form-package';const myForm = (props) => (
);
`#### Props
Property | Type | Required | Default | Description
---|---|---|---|---
id | String | true | |
type | String | true | |
, date, textarea, datetime-local, email, number, tel, text, password, time, url, file
required | Bool | false | false |
min | String (digit or date (YYYY-MM-DD)) | false | | , textarea, password: has to have at least min characters; number, date: has to be at least min
max | String (digit or date (YYYY-MM-DD)) | false | | , textarea, password: has to have at least min characters; number, date: has to be at least min
match | RegEx | false | | the input value has to match the
sameAs | String | the input value has to have the same value as the input field with the id specified in
preOnChange | Func | false | | manipulate the state before its validated (see State Manipulation)
errorMessage | String | false | | define your own custom error message for the input
onFocus | Func | false | | get access to the state of the form when the user focus on the input
onChange | Func | false | | get access to the state of the form when the user changes the input
onBlur | Func | false | | get access to the state of the form when the user blurs the input
dynamic | Bool | false | | only needed for dynamically added fields
field | Object | false | | only needed for dynamically added fields. This object holds at least , type, and may hold min, max, required
bintTo | String | false | | only needed for binding input fields. The id of the inpu you want to manipulate
bindToCallback | Func | false | | only needed for binding input fields. The callback to set the target's () input value, which gets called onChange$3
> This component is here for edge cases where you get the state from another component and you have to pass it to the
component manually, e.g. third party components.This component has to be a child within the
component. This component exposes three additional props to its child component so that you are able to use third party components.#### Basic Usage
`jsx
import {
Form,
FieldWrapper,
} from 'react-form-package';
`Render a
with an and a component.Take a look into the Third Party Components Section to see how you can use this component properly.
`jsx