React-forms-component NPM

React Forms Component

Form Component including validation for React

Table of Contents

Installation
Usage
Example
Credits

Installation

To install just run the following command:

> npm install react-forms-component

Usage

Import Library

import ReactForm from 'react-forms-component';
import ReactFormValidations from 'react-forms-component/validations';

Basic Component Usage

<ReactForm></ReactForm>

Optional Props

Paramater	Type	Remark
`classNameError`	string	Will apply the className when an input field is not valid
`styleError`	object	Will apply these inline styles when an input field is not valid
`onValidationChange`	func	Will be fired when the overall form validation status changes

Validations

List of build in Validations

Validation	Parameters
`Required`	No extra parameters
`IsNumber`	No extra parameters
`MinLength`	Length size: Number
`MaxLength`	Length size: Number
`Min`	Length size: Number
`Max`	Length size: Number

Sample

To following example is using 2 of the above built-in validation functions:

<input 
    type="text" 
    data-model="username" 
    data-validations={
        [
            ReactFormValidations.Required, 
            (m, v) => ReactFormValidations.MinLength(m, v, 5)
        ]
    } />

Custom Validations

If the above built-in validations are not enough for your application, you can create your own Validation functions. Below is an example of a custom validation:

static Max = (modelName, value, no, customError) => (value && parseInt(value) <= no ? true : ReactFormValidations._createErrorMessage(customError, modelName, `greater than ${no}`));

Display Errors

To display the error message inline you can need to use data-error-for attribute/prop:

<div className="error-label" data-error-for="username"></div>

Example

The following is an example of how to use this library in your application:

Sample JSX

<ReactForm
    classNameError="error"
    onValidationChange={this.handleValidationChange}
    ref={(form) => {
        this.form = form; 
    }}
>
    <div className="form-control">
        <div className="error-label" data-error-for="username"></div>
        <label>Username:</label>
        <input 
            type="text" 
            data-model="username" 
            data-validations={
                [
                    ReactFormValidations.Required, 
                    (m, v) => ReactFormValidations.MinLength(m, v, 5)
                ]
            } />
    </div>
    ...
</ReactForm>
<div className="form-control">
    <label></label>
    <button disabled={!isValid} onClick={this._handleClick}>Populate Model</button>
</div>

Sample Event Handler

handleValidationChange = (isValid) => {
    this.setState({
        isValid,
    });
}

_handleClick = () => {
    console.log(this.form.getModel());
}