Repository files navigation

React hook to handle controlled form change and validation.

Your project needs to useReact.js 16.8 or later.

$ npm i @knightburton/react-use-form

or

yarn add @knightburton/react-use-form

Here's an example of basic usage:

importReactfrom'react';importuseFormfrom'@knightburton/react-use-form';constApp=()=>{constonSubmit=data=>console.log(data);const{ fields, handleChange, handleSubmit}=useForm({schema:[{field:'text',value:''}],    onSubmit,});return(<formonSubmit={handleSubmit}><inputtype="text"id="text"name="text"value={fields.text.value}onChange={handleChange}/>{fields.text.error&&<p>{fields.text.error}</p>}<inputtype="submit"value="Submit"/></form>);};exportdefaultApp;

For more detailed example check theexample directory.

The hook returns an object with the following props.

The hook behavior can be modified with the following props.

The option itself is anarray of objects and each object should look like this:

This is anarray of objects where each item defines rules and error messages:

Local development is broken into two parts (ideally using two terminal tabs).

First, run rollup to watch yoursrc/ module and automatically recompile it intodist/ whenever you make changes.

# Assume that you are in the project main folder$ npm i$ npm start

The second part will be running theexample/ create-react-app that's linked to the local version of your module.

# Assume that you are in the project main folder$cd example$ npm i$ npm start

First off all, thanks for taking the time to contribute! 💪

Before any action, please visit theCode of Conduct andContributing guideline for more information.

react-use-form is Open Source software under the MIT license. Complete license and copyright information can be found within thelicense.