React-boilerplate-form
React-boilerplate-form is tiny library that provides boilerplate form components and validators for ReactJS. Main goal of this library is to separate business logic from UI and keep it pure and clean.
Library provides common form elements (e.g. Input, Form, Select) and few specific (Errors, Profile) as React components. Additional functionalities (e.g. isDirty, isValid, isBusy) are available when Form component is used as FaaC. Components do not have any styling. Hence, classes and styles should be applied to them as to any other React components.
Also, many custom sync or async validators for complete form or particular field can be defined although basic set of rules are provided (e.g. min, max, greater, least, size, required).
Main features
- Expressive and intuitive syntax
- Custom field validation rules (sync and async)
- Custom form validation rules (sync and async)
- Custom field value decorators
- React components that match common HTML form tags
- Support for different profiles (e.g. insert, update)
Install
Install it with NPM
npm install react-boilerplate-form --save
Prerequisites
- ReactJS 16.4+
Usage
Form should be defined in two steps:
- define rules (validations and decorators) for form fields
const fieldset = 'firstname';
- create UI
console.log(values)}> Submit
Complete example:
import React from 'react';import FormFieldRules FormRules TextFormField NumberFormField Form Input from 'react-boilerplate-form'; { const fieldRules = 'id' 'title' ; const formRules = ; const onSubmit = console; const initalValues = 'id': 1; return <Form = = => <label ="id">ID:</label> <Input ="id" /> <label ="title">Title:</label> <Input ="title" /> <button ="submit">Submit</button> </Form> ;};
Form as FaaC example:
import React from 'react';import FormFieldRules FormRules TextFormField NumberFormField Form Input from 'react-boilerplate-form'; { const fieldRules = 'firstname' 'age' ; const onSubmit = console; const initalValues = 'age': 18; return <Form = = => isDirty <React.Fragment> <label ="firstname">Firstname: && <small>changed</small></label> <Input ="firstname" /> <label ="age">Age: && <small>changed</small></label> <Input ="age" /> <button ="submit">Submit</button> </React.Fragment> </Form> ;}
Please go on wiki for more examples and complete API.