ornament-form-kit

2.1.0 • Public • Published

React Form Kit Build Status

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

Package Sidebar

Install

npm i ornament-form-kit

Weekly Downloads

1

Version

2.1.0

License

MIT

Unpacked Size

22.8 kB

Total Files

18

Last publish

Collaborators

  • atomiomi