React Form Kit
Install
npm install ornament-form-kit
You also need to install peer dependencies by yourself
npm install lodash // v4.x.x
npm install react // v16.x.x
npm install prop-types // v15.x.x
This module targets Node.js 8 or later and the latest version of Chrome, Firefox, and Safari. If you want support for older browsers use Babel compiler.
Usage
Include:
const Form Text = ;const Form = ;const Text = ;
Full example:
const Form Submit Text Textarea Select RadioGroup Checkbox} = ; // Validation schemeconst personValidation = firstname: required: true validate: valuelength > 5 message: 'Wrong name format' sex: required: true message: 'Sex is required' ; const App = <Form = = = = = = > /* field is model key */ <Text ="firstname" /> <Textarea ="description" /> <Checkbox ="married" /> /* options: array of { value, content } objects */ <Select ="gender" = /> <RadioGroup ="age" = /> </Form>;
Components
Form
const Form = ;
- Main component. It stores model and updates it.
- Every control should be placed inside it.
- If form is locked then all children controls are locked.
Properties:
- locked:
boolean
Locks form submit and model update - defaultModel:
object
Object to pre-fill form - validateOnUpdate:
bool
Enable/Disable real time validation - validationRate:
number
Real time validation rate limit - validation:
object
Validation scheme - children:
function
node
If function is passed then it takes form api as an argument. More about form api in "form connect" section - onSubmit:
function
Native form submit event. Takes native event as argument - onValidSubmit:
function
Called when validation was passed. Takes model as argument - onInvalidSubmit:
function
Called when validation wasn't passed
Text
const Text = ;
Properties:
- field:
string
Model field name - type:
string
Input "type" attribute
Textarea
const Textarea = ;
Properties:
- field:
string
Model field name
Select
const Select = ;
Properties:
- field:
string
Model field name - options:
array
Array of{ value, content }
objects
Checkbox
const Checkbox = ;
Properties:
- field:
string
Model field name
RadioGroup
const RadioGroup = ;
Properties:
- field:
string
Model field name - options:
array
Array of{ value, content }
objects - itemClassName:
string
Each<input type="radio">
is wrapped in span. You can pass css class name for it - contentClassName:
string
Each radio content is wrapped in span. You can pass css class name for it
Submit
const Submit = ;
Disabled if parent form is locked
Form connect HOC
const connect = ;
It is possible to write own controls and components. By wrapping component by connect
form api is passed as extra prop.
Example
const connect = ; const MyComponent = ;
Form api
- locked:
bool
Is form locked or not - model:
object
Form model - errors:
object
Errors object. Each key corresponds to model field and contains error messages that was passed to validation - updateField:
function
Takes 2 params - field name and new value
License
MIT © Abylay Keldibek