README
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 } = require('ornament-form-kit');
const Form = require('ornament-form-kit/form');
const Text = require('ornament-form-kit/text');
Full example:
const {
Form,
Submit,
Text,
Textarea,
Select,
RadioGroup,
Checkbox,
} = require('ornament-form-kit');
// Validation scheme
const personValidation = {
firstname: {
required: true,
validate: [value => value.length > 5],
message: 'Wrong name format',
},
sex: {
required: true,
message: 'Sex is required',
},
};
const App = () => (
<Form
{/* Pre-fills form with default data */}
defaultModel={personModel}
{/* Validation scheme */}
validation={personValidation}
{/* Enable real time validation */}
validateOnUpdate
{/* Override real time validation rate limit, default: 200 */}
validationRate={500}
{/* Native event, takes event as argument */}
onSubmit={handleSubmit}
{/* Validation was passed, takes model as argument */}
onValidSubmit={handleValidSubmit}
{/* Validation wasn't passed */}
onInvalidSubmit={handleInvalidSubmit}
>
{/* field is model key */}
<Text field="firstname" />
<Textarea field="description" />
<Checkbox field="married" />
{/* options: array of { value, content } objects */}
<Select field="gender" options={options} />
<RadioGroup field="age" options={options} />
</Form>
);
Components
Form
const Form = require('ornament-form-kit/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 = require('ornament-form-kit/text');
Properties:
- field:
string
Model field name - type:
string
Input "type" attribute
Textarea
const Textarea = require('ornament-form-kit/textarea');
Properties:
- field:
string
Model field name
Select
const Select = require('ornament-form-kit/select');
Properties:
- field:
string
Model field name - options:
array
Array of{ value, content }
objects
Checkbox
const Checkbox = require('ornament-form-kit/checkbox');
Properties:
- field:
string
Model field name
RadioGroup
const RadioGroup = require('ornament-form-kit/radio_group');
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 = require('ornament-form-kit/submit');
Disabled if parent form is locked
Form connect HOC
const connect = require('ornament-form-kit/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 = require('ornament-form-kit/connect');
const MyComponent = connect(({ form }) => {
// ... do smth with form api
});
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