@onebeyond/react-form-builder

v2.3.1

Published

25 days ago

React from builder using json schema

Downloads

859

0High
0Medium
0Low

guidesmiths_bot

ulisesgascon

inigo.marquinez

react-form-builder

React form builder using json schema

Install

npm install --save @onebeyond/react-form-builder

Usage

import React, { useEffect, useState } from 'react'
import forms from './forms.json'
import FormBuilder from 'react-form-builder'

const [formErrors, setFormErrors] = useState()

const onSubmitForm = (data) => {
    if (data.password !== data.confirmpassword) {
      setFormErrors([{ field: 'confirmpassword', type: 'doesNotMatch' }])
    } else {
      !isLoading &&
        alert(
          `You have submitted your form correctly Data: ${'\n'} ${JSON.stringify(
            data,
            null,
            2
          )}`
        )
      setLoading(true)
      setTimeout(() => {
        setLoading(false)
      }, 1000)
    }
  }

const Example = () => {
  render() {
   <FormBuilder
        idForm={forms.contact.id}
        form={forms.contact}
        onSubmit={onSubmitForm}
        isoCode='ES'
        onLinkOpen={onLinkOpen}
        isLoading={isLoading}
        formErrors={formErrors}
      />
  }
}

Live Playground

For examples of react-form-builder in action go to:

http://guidesmiths-react-form-builder.s3-website.eu-central-1.amazonaws.com/

Formbuilder options

| Option | Description | Type | Default | |-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|:----------------:|:-------:| | idForm* | Id for the form | string | '' | | form* | The json with the questions to create | json | - | | onSubmit* | Action to be realised "onSubmit" form | function | - | | language | Shortcut with the language to render components in multiple languages (country,date) Available laguages: es,de,fr,en | string | en | | isoCode | Isocode of the country to show as default in phone input | string | GB | | isMobile | A boolean toggle is assigned to check if we are from a mobile port view | boolean | false | | countryAndRegionsData | Array of objects with the acronym(s) and the names of the countries that you want to display in the countrySelect (see example) | Array of objects | - | | onLinkOpen | Function to be executed when there is a custom link | function | - | | formErrors | Array of custom errors associated with specific fields | Array of objects | [] |

CountryAndRegionsData example:

[
  { "cn": "MyOwnCountry1", "cs": "MC1" },
  { "cn": "MyOwnCountry2", "cs": "MC2" },
  { "cn": "MyOwnCountry3", "cs": "MC3" },
  { "cn": "MyOwnCountry4", "cs": "MC4" }
]

Questions

Checkbox

Reminder: A custom link it will be indicated by the start of a '#' in the markdown label. This link will execute the action that you had sent in the onLinkOpen param in the ReactFormBuilder component.

Checkbox example

    {
          "name": "terms_and_conditions",
          "label": "This is the label of the checkbox with a [customLink](#customLink) and [normalLink](https://www.dcsl.com/careers/)",
          "type": "checkbox",
          "defaultChecked": false,
          "errorMessages": {
            "required": "This field is required"
          },
          "registerConfig": {
            "required": true
          }
        }

https://user-images.githubusercontent.com/79102959/134894112-e4f38ced-0992-428c-95c3-bcdce20cd858.mp4

Country

| Option | Description | Type | Default | |---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|:-------:|:-------:| | name* | Country component name | string | - | | type* | Must be country | string | - | | label | Text shown over the coutnry list | string | '' | | language | An string with the language shortcode in which you want to display the country names opt: Available laguages: es,de,fr,en | string | en | | placeholder | Placeholder displayed in the select | string | '' | | priorityOptions | Array of strings with shortcode(s) of the countries that want to be displayed first in the countries list. Ex: ['GB', 'ES'] | string | '' | | returnCountryName | Returns the country name (in English) as each option value, instead of the country code | boolean | false | | countryAndRegionsData | An object or array of objects with the acronym(s) and the names of the countries that you want to be shown in the select. | json | [] | | countryName | The name of the country | string | '' | | countryShortCode | To display the short code(s) for the countries Ex: ['GB', 'ES'] | string | '' | | errorMessages | | json | | | required | Error message to display on submit if there is no country selected | string | '' | | registerConfig | | json | | | required | Define if the country select is required | boolean | false |

Reminder: the countryAndRegions prop that can be sent in the ReactFormBuilder will be rendered in this component and will replace the default list.

Country example:

{
  "name": "country_of_residence",
  "type": "country",
  "label": "This is the label of the country select",
  "placeholder": "Please select an option ^^",
  "priorityOptions": ["GB", "ES"],
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  }
}

Custom list country example:

{
  {
      "countryName": "MyOwnCountry1",
      "countryShortCode": "MC1"
    },
    {
      "countryName": "MyOwnCountry2",
      "countryShortCode": "MC2"
    },
    {
      "countryName": "MyOwnCountry3",
      "countryShortCode": "MC3"
    },
    {
      "countryName": "MyOwnCountry4",
      "countryShortCode": "MC4"
    }
}

{
  "name": "country_of_residence",
  "type": "country",
  "label": "This is the label of the country select",
  "placeholder": "Please select an option ^^",
  "priorityOptions": ["GB", "ES"],
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  }
}

https://user-images.githubusercontent.com/79102959/134897712-95e4391c-cfbb-42cd-b813-06596d9b7096.mov

Country v2

| Option | Description | Type | Default | |--------------------|--------------------------------------|:------:|:-------:| | name* | Country component name | string | | | type* | Must be country_v2 | string | | | label | Text shown over the country question | string | '' | | placeholder | Placeholder displayed in the select | string | '' | | config | See table below | json | {} | | errorMessages | Validation errors | json | {} | | registerConfig | Validation rules | json | {} |

config options

| Option | Description | Type | Default | |-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------:|:-------:| | whitelist | List of ISO 3166-1 alpha-2 codes of the countries allowed in the list.This is mutually exclusive with blacklist and whitelisttakes precedence. | string[] | [] | | blacklist | List of ISO 3166-1 alpha-2 codes of the countries not allowed in the list.This is mutually exclusive with whitelist and whitelisttakes precedence. | string[] | [] | | priorityOptions | List of ISO 3166-1 alpha-2 codes of the countries to be displayed first in the list.Ex: ['GB', 'ES'] | string[] | [] | | search | Allows the user to search typing in the select control | boolean | false | | flag | Shows the flag of the country before the name | boolean | false |

The countires will be displayed in the language according to the language attribute of the FormBuilder. It should use the ISO 639-1 code of the language to display countries names. Available laguages: en, es, de, fr.

This library depends on the i18n-iso-countries library to translate the country names and flags. If you want to translate the countries to a different language, you can use the registerLocale method of the i18n-iso-countries library to register a new locale. For example, to translate the countries to Afrikaans, install the library and do the following:

import countriesTools from 'i18n-iso-countries'
import afLocale from 'i18n-iso-countries/langs/af.json'
countriesTools.registerLocale(afLocale)

Country v2 example:

{
  "name": "country_of_residence",
  "placeholder": "Select your country of residence",
  "type": "country_v2",
  "label": "Country of residence",
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  },
  "config": {
    "whitelist": [
      "DE",
      "ES",
      "FR",
      "IT",
      "PT"
    ],
    "priorityOptions": [
      "ES",
      "PT"
    ],
    "flag": true
  }
}

Country subdivision

| Option | Description | Type | Default | |--------------------|------------------------------------------|:------:|:-------:| | type* | Must be country_subdivision | string | | | name* | Question name | string | | | id | Question id to customize styles | string | | | label | Text shown over the question | string | | | placeholder | Placeholder displayed in the select | string | | | config | Question configuration (see table below) | json | {} | | errorMessages | Validation errors | json | {} | | registerConfig | Validation rules | json | {} |

config options

| Option | Description | Type | Default | |---------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------:|:----------:| | search | Allows the user to search typing in the select control | boolean | false | | priorityOptions | List of ISO 3166-1 alpha-2 codes of the subdivisions to be displayed first in the list for each country.Ex: { "ES": ["VI", "AB"] } | json | {} | | whitelist | List of ISO 3166-1 alpha-2 codes of the subdivisions allowed for each country.This is mutually exclusive with blacklist and whitelisttakes precedence. | json | {} | | blacklist | List of ISO 3166-1 alpha-2 codes of the subdivisions not allowed for each country.This is mutually exclusive with whitelist and whitelisttakes precedence. | json | {} | | countryIsoCode | ISO code of the country to get the subdivisions from.If provided, it will take precedence over the countryQuestionName to get the selected country. | string | | | countryQuestionName | Name of the country question to get the selected country ISO code from.If not provided, a hardcoded country ISO code must be provided in countryIsoCode. | string | | | valueType | The type of the value to be returned. Possible values: iso_code, full_iso_code, name. | string | iso_code |

[!IMPORTANT] Take into account that the ISO 3166-2 codes of some countries include relevant administrative divisions and dependent territories. For example, for US the outlying areas are also officially assigned their own country codes. So you would need to manualy blacklist them if you want to exclude them from the list.

Country v2 example:

{
  "name": "country_subdivision",
  "placeholder": "Choose a region",
  "type": "country_subdivision",
  "label": "Select your region",
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  },
  "config": {
    "search": true,
    "countryIsoCode": "ES",
    "priorityOptions": {
      "ES": ["VI", "AB"]
    }
  }
}

Date

Date examples

Basic date example

{
  "name": "dob",
  "type": "date",
  "label": "Date of birth",
  "placeholder": "dd/mm/yyyy",
  "openToDate": "1/1/2000",
  "errorMessages": {
    "required": "This field is required",
  },
  "registerConfig": {
    "required": true
  }
}

Under age date example

{
  "name": "dob",
  "type": "date",
  "label": "Date of birth",
  "placeholder": "dd/mm/yyyy",
  "minAge": 18,
  "errorMessages": {
    "required": "This field is required",
    "underAge": "You must be 18 years old or above"
  },
  "registerConfig": {
    "required": true
  }
}

https://user-images.githubusercontent.com/79102959/134897303-817957ba-12d1-4c0c-a64f-6ab0c99d72fd.mp4

Input

Input examples

Basic input example

{
  "name": "email",
  "type": "input",
  "label": "",
  "placeholder": "Email Address*",
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  }
}

Input with pattern control example

{
  "name": "email",
  "type": "input",
  "label": "",
  "placeholder": "Email Address*",
  "errorMessages": {
    "required": "This field is required",
    "pattern": "Invalid email"
  },
  "registerConfig": {
    "required": true,
    "pattern": "/^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$/"
  }
}

Input with custom error (for example, if the user tries to sign up with an email that has already beeen used)

{
  "name": "email",
  "type": "input",
  "label": "",
  "placeholder": "Email Address*",
  "errorMessages": {
    "required": "This field is required",
    "pattern": "Invalid email",
    "repeatedEmail": "This email has already been registered"
  },
  "registerConfig": {
    "required": true,
    "pattern": "/^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$/"
  }
}

Input with field descriptions

{
  "name": "password",
  "type": "password",
  "label": "Password",
  "placeholder": "Password",
  "descriptions": [
    "Password must be 8-20 characters long",
    "Contain at least 1 number, 1 letter and 1 special character"
  ]
}

Input with styled icon

{
  name: 'inputName',
  type: 'input',
  label: 'input label',
  placeholder: 'input placeholder',
  icon: {
    name: 'question-circle',
    fill: 'red'
  },
  tooltip: {
    text: 'tooltip text example',
    config: {
      backgroundColor: 'green'
    }
  },
  errorMessages: {
    required: 'This field is required',
    pattern: 'This is not the right pattern'
  },
  registerConfig: {
    required: true
  }
}

https://user-images.githubusercontent.com/79102959/134945983-c0c38274-05c7-42b7-8ad3-c80b33db6611.mov

Markdown

Markdown examples

Markdown example

{
    name: "Markdown component",
    type: "markdown",
    label: "El texto a **mostar** en el markdown [exmaple]()"
}

Markdown

MultipleCheckbox

Multiplecheckbox examples

Basic multiplecheckbox

{
  "name": "multiplecheckbox_name",
  "type": "multiple_checkboxes",
  "placeholder": "Please select all that apply",
  "label": "What option do you prefer?",
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  },

  "config": {
    "options": [
      {
        "value": "option1",
        "label": "LabelOption1"
      },
      {
        "value": "option2",
        "label": "LabelOption2"
      },
      {
        "value": "option3",
        "label": "LabelOption3"
      }
    ]
  }
}

Multiplecheckbox with images and labels

{
  "name": "multiplecheckbox_name",
  "type": "multiple_checkboxes",
  "placeholder": "Please select all that apply",
  "label": "What option do you prefer?",
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  },

  "config": {
    "options": [
      {
        "value": "option1",
        "src": "/src/assets/image1"
      },
      {
        "value": "option2",
        "label": "LabelOption2"
      },
      {
        "value": "option3",
        "src": "/src/assets/image3"
      }
    ]
  }
}

Multiplecheckbox with minimumLen

{
  "name": "multiplecheckbox_name",
  "type": "multiple_checkboxes",
  "placeholder": "Please select all that apply",
  "label": "What option do you prefer?",
  "errorMessages": {
    "required": "This field is required",
    "minimumLen": "You must choose at least two options"
  },
  "registerConfig": {
    "minimumLen": 2,
    "required": false
  },
  "config": {
    "options": [
      {
        "value": "option1",
        "label": "LabelOption1"
      },
      {
        "value": "option2",
        "label": "LabelOption2"
      },
      {
        "value": "option3",
        "label": "LabelOption3"
      }
    ]
  }
}

https://user-images.githubusercontent.com/79102959/134945855-52577cab-9b16-4df5-8978-b269be0ffce9.mov

Phone

Reminder: The isoCode prop that can also be sent in the ReactFormBuilder component will define the default country displayed in the phone field.

Important: due to a known issue in older versions of NextJS, it's necessary to add the following import in any files where the form builder contains a Phone question:

import 'react-phone-number-input/style.css'

Basic phone

{
  "name": "phone",
  "type": "phone",
  "label": "",
  "registerConfig": {
    "required": true
  },
  "defaultCountry":"GB",
  "placeholder": "Phone",
  "errorMessages": {
    "required": "This field is required"
  }
}

https://user-images.githubusercontent.com/79102959/134948115-4f461d76-8d06-4cb8-adc0-e2bef5f9d16f.mov

RadioButton

RadioButton example

Basic radiobutton

{
  "name": "radio_name",
  "label": "este es el texto de la pregunta",
  "type": "radio",
  "options": [
    {
      "value": true,
      "label": "YES"
    },
    {
      "value": false,
      "label": "NOP"
    }
  ],
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  }
}

https://user-images.githubusercontent.com/79102959/134948337-03618f4c-6cc7-409a-b95b-c3737ade9130.mov

Select

Select examples

Select basic example:

{
  "name": "color",
  "type": "select",
  "placeholder": "Please choose an option",
  "label": "What is your favorite color?",
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  },
  "config": {
    "options": [
      {
        "value": "red",
        "label": "Red"
      },
      {
        "value": "black",
        "label": "Black"
      },
      {
        "value": "prefer_not_say",
        "label": "prefer not to say"
      }
    ]
  }
}

Select example with custom arrows in the public/icons folder:

{
  "name": "color",
  "type": "select",
  "placeholder": "Please choose an option",
  "label": "What is your favorite color?",
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  },
  "config": {
    "arrows": {
      "up": "icons/ArrowUp.svg",
      "down": "icons/ArrowDown.svg",
      "width": 18,
      "height": 18
    },
    "options": [
      {
        "value": "red",
        "label": "Red"
      },
      {
        "value": "black",
        "label": "Black"
      },
      {
        "value": "prefer_not_say",
        "label": "prefer not to say"
      }
    ]
  }
}

https://user-images.githubusercontent.com/79102959/134949537-3647437e-0330-4692-bd30-ef6aa319bd7b.mov

Autocomplete

It works the same as select field, but searchable option is available.

Autocomplete examples

Autocomplete basic example

{
  "name": "color",
  "type": "autocomplete",
  "placeholder": "Please choose an option",
  "label": "What is your favorite color?",
  "errorMessages": {
    "required": "This field is required"
  },
  "registerConfig": {
    "required": true
  },
  "config": {
    "options": [
      {
        "value": "red",
        "label": "Red"
      },
      {
        "value": "black",
        "label": "Black"
      },
      {
        "value": "prefer_not_say",
        "label": "prefer not to say"
      }
    ]
  }
}

ReCAPTCHA

This feature is implemented using react-google-recaptcha. By default it shows at the bottom-right of your app and will only show the ReCAPTCHA modal when bot-like behavior is detected filling the form.

ReCAPTCHA example

    {
      "name": "my-recaptcha",
      "type": "recaptcha",
      "recaptchaKey": "your-recaptcha-key"
    }

Accessibility

The accessibility requirements for all the form tags are already configured in the library. For components (input, checkbox, select, radio…) different attributes have been introduced that can be configured through props.

Next, we can see different attributes and tags to adjust the accessibility of the form and how to configure them:

To define the style for the fields, as we use theme-ui, we can either do inline-styling using style=”” or instead sx=”” where you pass the style accordingly. Also, we can include an “id” attribute for input that needs a unique style.
For the markdown component, we can add the corresponding tag to the text or title. To illustrate that, if the title is an h2, it will include “##” before text, or, if the title is an h3, it will include “###”, and so on.

Following are the few code examples to see how we use each component:

Main form

{
  "en": {
    "contact": {
      "name": "Contact Form",
      "enabled": true,
      "accessibilityError": true,
      "questions": [...]
    }
  }
}

Input tag

<div class="form-group">
    <label for="first_name">First name*</label>
    <input
        type="text"
        class="form-control"
        placeholder=""
        id="first_name"
        name="first_name"
        aria-describedby="error_message_first_name"
        required>
    <span class="invalid-feedback"
          style="display:block;"
          id="error_message_first_name">This field is required</span>
</div>

Dropdown fields

<div class="form-group">
    <label for="age">Age Range</label>
    <select class="form-control"
            autocomplete="off"
            id="age"
            name="age"
            aria-describedby="error_message_age"
            required
    >
        <option value="" disabled>Please make a selection</option>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
    </select>
    <span class="invalid-feedback"
          style="display:block;"
          id="error_message_age">Please make a selection</span>
</div>

Multiple checkbox

<div class="form-group" ref="what_sport_interested_in">
    <fieldset>
        <legend for="what_sport_interested_in">Are you interested in any of the sports below?</legend>
        <span class="invalid-feedback"
          style="display:block;"
          id="error_message_what_sport_interested_in">Please make a selection</span>
        <div class="form-group container">
            <div class="row">
                <div class="form-check col-12 col-md-6">
                    <input type="checkbox" 
                      class="form-check-input"
                      value="Tennis"
                      id="what_sport_interested_in_tennis"
                      name="what_sport_interested_in_tennis"
                      aria-describedby="error_message_what_sport_interested_in">
                    <label class="form-check-label" for="what_sport_interested_in_tennis">Tennis</label>
                </div>
                <div class="form-check col-12 col-md-6">
                    <input type="checkbox" 
                      class="form-check-input"
                      value="Football"
                      id="what_sport_interested_in_football"
                      name="what_sport_interested_in_football"
                      aria-describedby="error_message_what_sport_interested_in">
                    <label class="form-check-label" for="what_sport_interested_in_football">Football</label>
                </div>
            </div>
        </div>
    </fieldset>
</div>

Checkbox fields

<div class="form-group">
    <label for=”privacy_policy">Privacy policy*</label>
    <input
        type="checkbox"
        class="form-control"
        id="privacy_policy"
        name="privacy_policy"
        aria-describedby="error_message_privacy_policy"
        required>
    <span class="invalid-feedback"
          style="display:block;"
          id="error_message_first_name">This field is required</span>
    <div>
         <p> I confirm I am aged 18 years or older, a resident of the United Kingdom and have read and agree to the competition terms and condition and privacy policy</p>
   </div>

Storybook

TODO: npx storybook@next automigrate

To contribute

npm install
npm run dev
Open another tab and do cd example
npm install
npm start

See localhost:3000

Any change on the root src library will be reflected on the usage in the example folder.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-form-builder

Install

Usage

Live Playground

Formbuilder options

CountryAndRegionsData example:

Questions

Checkbox

Checkbox example

Country

Country example:

Custom list country example:

Country v2

config options

Country v2 example:

Country subdivision

config options

Country v2 example:

Date

Date examples

Input

Input examples

Markdown

Markdown examples

MultipleCheckbox

Multiplecheckbox examples

Phone

RadioButton

RadioButton example

Select

Select examples

Autocomplete

Autocomplete examples

ReCAPTCHA

ReCAPTCHA example

Accessibility

Following are the few code examples to see how we use each component:

Main form

Input tag

Dropdown fields

Multiple checkbox

Checkbox fields

Storybook

To contribute

Contributors ✨