react-formify
An uncontrolled react Form component with validation capabilities.
Install
npm install react-formify
or
yarn add react-formify
Usage
;; const emailExpression = /^@$/; const rules = { if !value || value === '' return 'Email is required'; else if !emailExpression return 'Email is not valid'; return undefined; } name: 'Name is required'; const UserForm = <Form defaultErrors= email: 'This is an existing email' defaultValue= email: 'alan@gmail.com' onSubmit= { ; ; } rules=rules > <fieldset> <input ...statename /> errorsname ? <span className="error">errorsname</span> : undefined <input ...stateemail /> <input ...state /> errorsemail ? <span className="error">errorsemail</span> : undefined <button type='submit'>Add</button> <button type='button' onClick= { state; state; } disabled=isValid > Set Default </button> </fieldset> </Form>;
- NOTE: ⚠️ it is the caller responsibility to add some control to submit the form. In this example we are adding a submit button.
Try
Form Props (API)
children
Required. A function that will be invoked with state and errors. State is an object that you can get the form properties per key defined in rules. For example, these rules:
const rules = { if !value || value === '' return 'Email is required'; else if !emailExpression return 'Email is not valid'; return undefined; } name: 'Name is required';
will generate the following state:
{
email: {
name: 'email',
value: 'alan@gmail.com',
onChange: (event) => { ... },
},
name: {
name: 'name',
value: '',
onChange: (event) => { ... },
}
}
This approach of holding the values in a raw object allows you to use any form element you want. You can use <input />
from React, or <TextInput />
from Grommet. All you need to do is to make sure to call {...state.name}
where name is the property you want to assign to a given form element.
- errors object will hold the errors in a given form element. The errors will be present if you passed some
defaultErrors
or when the form is submitted.
You can call state.get('optional')
to get the form properties object for fields that do not have any validation criteria. Similarly, you can call errors.get('address.street.home')
to get the error of a given nested property in the object, returning undefined otherwise.
You can also call state.set('key', value)
or state.set({ key: value, key2: value })
to update react-formify
resource value.
defaultErrors
An object with default errors to show when the form is rendered.
defaultValue
An object with default values to show when the form is rendered.
onSubmit
Required. A function that will be invoked when the form is submitted and valid. The object (resource) is passed as the first argument to the function. The second argument is a reset function that, upon called, will reset the form state.
onError
Optional. A function that will be invoked when an error happens in the form. This function will pass all the current errors in the callback.
onChange
Optional. A function that will be invoked when any form element is changed. This function will pass an object that contains what has been changed.
reset
Optional. Whether or not the form should reset to its original state.
rules
An object or function that will validate the form based on predefined rules. If rules
is a function, it will be invoked when validation is needed. The function passes the resource as the argument so that the caller can decide which set of rules to return. This can be useful when you want a completely different set of rules depending on a given selection in the form, for example:
const userRules = { const defaultValidation = { if !value || value === '' return 'Email is required'; else if !emailExpression return 'Email is not valid'; return undefined; } name: 'Name is required' size: 'Size is required' confirm: 'Please confirm answers' address: home: street: 'Street is required' ; if useraddress && useraddresshome && useraddresshomestreet && useraddresshomestreet !== '' return ; return defaultValidation;};
In this example, city
will be required if street
name is provided.
Build
To build this library, execute the following commands:
- Install NPM modules
$ npm install (or yarn install)
- Run pack
$ npm run dist
- Test and run linters:
$ npm run check