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}} />;
    }
}

License

MIT © gnemtsov