React-ab-form NPM

react-ab-form

React-ab-form is a react component for creating forms. Writing forms markup, programming fields validation can be hard. React-ab-form is making the whole process a breeze. You just provide form data as a simple javascript object, config as component props and let her rip! :tada:

Live example is published on github.io.

React-ab-form produces form with live validation as user types, nice, clean responsible mobile-first css markup. Forms can be rendered as horizontal (default, CSS grid is used) or inline (layout="inline" prop must be set, CSS flex is used). Styles of the form can be overriden by custom className.

React-ab-form is a part of AB-APP:rocket: boilerplate for creating serverless apps in AWS. AB-APP includes backend logic of forms with self-consistent backend-frontend form validation and more.

Component properties

conf

Object Contains general configuration.

layout

String If not set, the form renders as horizontal form. Can be set to layout="inline" for an inline form.

infoIcon

HTML | JSX Here you can put your custom "i" icon - it can be a react component.

buttonText

String | Array of strings Text for the submit button. If array is given it must contain two elements: one for default state and one for sending state. Default value is "Submit", "Sending...".

doneText

String Text that appers near the submit button if the form was submitted successfully. Default value is "Done!".

doneTextDuration

Integer Number of milliseconds to display doneText near the submit button. Default value is 2000.

className

String Name of a custom class. This custom class is put on top of default form styles, so all custom styles override default. For example to make labels green, you should set your custom class: className = "CustomForm". Then write the following CSS in the .css file of your component, where you use react-ab-form:

.CustomForm .Label {
    color: green;
}

submitHandler

Function Function that will be invoked when form is submitted. Values of the form will be passed to this function as parameter. This function must return a promise.

If the promise resolves doneText is shown near the submit button.

If the promise rejects (it can happen when the server invalidate a field), the error will be catched by react-ab-form component. It expects to receive the error in the following format:

{
    response: {
            data: {
                field: {
                    name: 'field_name_here',
                    message: 'error_message_here'
                }
            }
        }
}

fields

Array of objects Each form field is an object with the following properties.

name

String Field name.

label

String Field label.

placeholder

String Field placeholder.

value

String Field value.

required

Boolean Whether field is required.

type

String Fields can be one of the following types:

Field type	Additional conditions	Renders as
String	-	input type="text"
String	noEcho = true	input type="password"
String	allowedValues is an array of 2 elements	input type="radio"
String	allowedValues is an array of more than 2 elements	select
Text	-	textarea
Number	-	input type="text"
Boolean	-	input type="checkbox"

allowedValues

Array Contains allowed values for the field (see "type" property description above).

noEcho

Boolean If set true, value of the field is obscured (see "type" property description above).

description

String String with additional field description. If set, small "i" icon appears near the field. When user hovers the icon this description appears as tooltip.

validators

Array of objects Contains validators functions descriptions (one or multiple). Each validator is described by separate object with the following properties:

params, (array): additional params values, passed to validator besides field value
message (string): message that should be shown when validator is not passed
f (function or function as a string): validator function, it should return true or false

When user changes field all validators are executed one by one with the current value of the field. If validator returns false, execution stops and current validator message is shown - field is considered invalid.

Install

npm install --save react-ab-form

Usage

In this code we use axios to send post request.

import React, { Component } from 'react';
import axios from 'axios';

import AbForm from 'react-ab-form';

export default class App extends Component {
    render() {
        const conf = {
            submitHandler: values => {
                console.log('Form values should be sent to the server here.');
                console.log('submitHandler must return promise.');
                return axios.post('api_endpoint_here', values)
                            .then(response => /*do something*/);
             }
        }

        const fields = [
            {
                name: 'name',
                label: 'Pet name',
                type: 'String',
                required: true,
                validators: [
                    {
                        params: [4, 64],
                        message: 'Must be bigger than 4 and smaller than 64 chars',
                        f: (value, minLength, maxLength) => value.length >= minLength && value.length <= maxLength
                    },
                    {
                        message: 'Can\'t contain digits',
                        f: value => !/[1-9]/.test(value)
                    },
                ]
            }
        ]

        return <AbForm data={{conf, fields}} />;
    }
}