react-free-forms v1.0.10

REACT FREE FORMS 🌊🔥🔥🔥

React component that will make your forms quick and simple

Overview

React free forms is a React library that will help you implement form into your project easy and quick way. It has no DOM structure restrictions so you can create any form you like.

Suppoted input types:

• text
• number
• password
• select
• radio
• checkbox
• email
• tel

Instalation

npm i react-free-forms

How to use

First you have to import Form and Input Components.

import { Form, Input } from 'react-free-forms'

In all cases Form component should be wrapping all Input components you would like to be validated together. Basic structure looks like this:

<Form>
    <Input />
</Form>

Form component

Gathers all Input components and validates them by given rules. All props it can receive are optional.

Input component

Renders <input> tag and decides about validation rules. Should be inserted inside <Form></Form> component. Only two props are required, others are optional.

Input rules

Rules define the way input should be validated. Most rules are self explanatory. For custom rule use customRegex prop.

• text - any string
• number - any number
• select - any truhy
• radio - any truhy
• checkbox - checked
• email
• zip-code
• phone
• email
• password - default password rule checks for:
  • a digit
  • a lowercase letter
  • an uppercase letter
  • at least 6 characters in total

Examples

Basic input example:

    <Form onSubmit={this.submitForm}>
        <Input name='text' required={true} />
    </Form>

Will render:

    <form>
        <label class="rff-inputComponent error" style="position: relative;">
            <input name="text" class="rff-inputComponent__input" value="">
            <p class="rff-inputComponent__error">input is required</p>
        </label>
    </form>

Radio and Select:

These types requires inputOptions prop that receives an array (or custom prop.children structure).

    <Form onSubmit={this.submitForm}>
        <Input name='radio' required={true} type='radio' inputOptions={[['test1', 'value1'], 'test2']} />
    </Form>

Will render:

<form>
    <label class="rff-inputComponent rff-inputComponent--radio" style="position: relative;">
        <div value="">
            <label>
                <input name="radio" type="radio" class="rff-inputComponent__input" value="value1">
                <span>test1</span>
            </label>
            <label>
                <input name="radio" type="radio" class="rff-inputComponent__input" value="test2">
                <span>test2</span>
            </label>
        </div>
    </label>
</form>

Custom Input children structure 😻

You are free to create your own structure inside Input component. When using Input component as a wrapper you can include only one <input>/<select> tag inside (or one set of radio inputs)

<Form onSubmit={this.submitForm}>
    <Input required={true} name='select' defaultValue='test2'>
        <select defaultValue='test2'>
            <option value='test'>test</option>
            <option value='test2'>test2</option>
        </select>
    </Input>
    <Input required={false} name='text'>
        <p>Input can even be wrapped another div</p>
        <div>
            <input type="text" />
        </div>
    </Input>
    <div>
        <div>
            <Input required={true} name='nested_input_component' />
        </div>
    </div>
    <button type='submit'>submit</button>
</Form>