@wasable/react-component-form v0.1.1-rc.41

react-component-form

Install

• Available on npm : npm i --save @wasable/react-component-form

• Import : import { Form, CheckboxField } from '@wasable/react-component-form';

Components

Form Component

<Form /> component depends on our internal HOC (High Order Component) react-form. You can find this dependency on npm : @wasable/react-form
React-form will give us some functions to prepare our React Context. This function will be given to all children you will provide to Form. Don't be afraid of magic. It's everywhere.

Props

List of Form's props. Bold properties is required by HOC beable-form.

initialData Props

initialData must contain an object which are your model's representation. Each key is an attribute and each value must be valued or initialize with ''.

Examples

For Create :

{
    first_name : '',
    last_name : ''
}

For Update :

{
    first_name : 'Antonin',
    last_name : 'Zampieri'
}

Here, react-form will instantiate his state with two keys : first_name and last_name.
That will allow our Form component to update state for this couple of keys only.

Validation Props

Each validation props must have an object with two keys :

{
    rules: // custom object where you will define for each attribute the rule which will be applied to
    rulesTypes: // custom rules you want to add
}

Examples

rules structure :

{
    phone: {
        rule: 'phone', //rule you will apply to phone (see React-Form docs to see which rules are available)
        fields: 'phone', //fields you target for this rule
        message: 'phone.invalid' //slug sent when rule validation failed. Allow you to react to it =P
    },
    zip_code: {
        rule: 'validate_zip_code', // custom rule see below.
        fields: 'zip_code', //fields you target for this rule
        message: 'zip_code.invalid'
    }
}

rulesTypes structure :

{
    validate_zip_code: validateZipCode // validateZipCode is a function which accept a value and must return a boolean
}

Nowadays, we luckily use for 90% required rules. Our react-form library give us a function which will make easier our life :

import { generateRequiredRules } from '@wasable/react-form';

generateRequiredRules will accept an array of key and return rules objects.

Example :

const required = [
    'first_name',
    'last_name'
];

const rules = {
    ...generateRequiredRules(required),
    phone: { rule: 'phone', fields: 'phone', message: 'phone.invalid'}
};

generateRequiredRules will return key like this one : {your_string}_required

Featured Components

Before, we saw how create our data form and our form structure. Now we will see how to handle each form item.

Each line on your form must be added into Form children. You can take one of our fields component or create one on your own.

In Form Component, we create a React Context. This one will allow us to have access to this props in each child components :

In addition to Context props, all our featured components will have this props:

errorStyles Props

Props

{
    className : 'string' // className for each error messages,
    itemClassName: 'string' // className for parent div
}

Featured Component List

• CheckboxField
• SelectField
• MultiSelectField
• SelectCountryField
• SubmitField
• TextField
• TextareaField

CheckboxField

Default component for boolean type parameter. This component hasn't its own particular properties.

SelectField

This component is a wrapper for react-select component. It has its own properties, in addition to default properties shown above :

MultiSelectField

This component is a wrapper for react-select component with isMulti = true. It has its own properties, in addition to default properties shown above :

SelectCountryField

This component is a wrapper for react-select-country-list component. It list the countries and return the right label.

SubmitField

This component is a bit different. It has the unique role to make the call to action submit component.

It has this props (it isn't sharing properties with other components) :

TextField

Default component of all type components =D. It's the light in the shadow. Use it for string parameters. It's a simple input.

It has one unique property (in addition to default properties shown above) :

TextareaField

Default component for text area

It has one property (in addition to default properties shown above) :