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.

Prop Name	Prop Type	Description
onSubmit	Function	Triggers upon successfully validated form with a result as a first argument
onFailure	Function	Triggers upon failed validation while submitting a form
onFocus	Function	Triggers when any form input is focused
onBlur	Function	Triggers when any form input is blurred
requiredErrorText	String	Passed as an error text for any required input that has no value
className	String	Additional class for <form> tag rendered within this component
id	String	Additional id for <form> tag rendered within this component
disabled	Boolean	Determines whether whole form should be disabled
recaptcha	String	Receives ReCaptcha sitekey as its value. If present it will protect form submitting with ReCaptcha service and pass a ReCaptcha token in its result
recaptchaInfoRef	Ref	This element will have its content replaced with obligatory information about recaptcha protection

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.

Prop Name	Prop Type	Description
required	Boolean	Required - tells whether input value is required
name	String	Required - it will be a key of that input value in result object
id	String	Custom id for <input> tag
type	String	Supported types
rule	String	Input Rules
inputOptions	Array	Array of options for radio and select inputs
inputClass	String	Custom class for <input> tag
errorClass	String	Custom class for tag holding error
labelClass	String	Custom class for <label> tag
placeholder	String	Placeholder for input
max	Number	Maximum value length (only for string values)
min	Number	Minimum value length (only for string values)
readonly	Boolean	Readonly attribute
disabled	Boolean	Disable attribute
onBlur	Function	Triggers when input is focused blurred
onFocus	Function	Triggers when input is focused focused
onBeforeChange	Function	Triggers when input value is about to be changed
onAfterChange	Function	Triggers when input value has been changed
title	String	Title block value above the input
errorText	String	Custom error text when validation has failed
group	String	Assigns this input value into given group inside result object
minErrorText	String	Custom error text when value is too short
requirederrortext	String	Custom error text for submitted required input with no value
customRegex	String	Custom regex for validating input value
defaultValue	String/Number	Input initial value

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>