React-basic-form NPM

react-basic-form

Form builder for React

Install

npm install --save react-basic-form

Usage

Example 1

import React from 'react';
import { render } from 'react-dom';
import Form from 'react-basic-form';
// import 'react-basic-form/dist/style.css'; //optional

render(
  <Form
    onSubmit={data => console.log(data)}
    validations={{
      email: value => emailRegex.test(value),
    }}
    errorMessages={{
      email: 'Please check your email address.',
    }}
  >
    <Form.Element label="Full Name" name="fullname" required />
    <Form.Element label="E-mail" name="email" type="email" required />
    <Form.Submit />
  </Form>,
  container,
);

Example 2

import React from 'react';
import { render } from 'react-dom';
import Form from 'react-basic-form';

render(
  <Form onSubmit={data => console.log(data)}>
    <Form.Element>
      {({ showErrorMessage, onChange }) => (
        <div>
          <input name="fullname" type="text" onChange={onChange} placeholder="Full Name" required />
          {showErrorMessage('fullname')}
        </div>
      )}
    </Form.Element>
    <Form.Submit>
      {({ isLoading }) => (
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Sending' : 'Send'}
        </button>
      )}
    </Form.Submit>
  </Form>,
  container,
);

Example 3

import React from 'react';
import { render } from 'react-dom';
import Form from 'react-basic-form';

render(
  <Form onSubmit={data => console.log(data)}>
    {({ showErrorMessage, onChange, isLoading }) => (
      <div>
        <div>
          <input name="fullname" type="text" onChange={onChange} placeholder="Full Name" required />
          {showErrorMessage('fullname')}
        </div>
        <button type="submit" disabled={isLoading}>
          Send
        </button>
      </div>
    )}
  </Form>,
  container,
);

Example 4

import React from 'react';
import { render } from 'react-dom';
import Form from 'react-basic-form';

render(
  <Form
    onSubmit={(data, submitState) => {
      submitState.start(); // isLoading true
      setTimeout(() => {
        console.log(data);
        submitState.end(); // form reset && isLoading = false
      }, 1000);
    }}
  >
    <Form.Element label="Full Name" name="fullname" required />
    <Form.Submit />
  </Form>,
  container,
);

API

`Form` props

Name	Type	Default	Description
onSubmit	(values, submitState) => {}		form submission handler
validations	Object	`{}`	validation rules for each form field
errorMessages	Object	`{}`	error messages for each form field
defaultErrorMessage	string	`'This field is required.'`	default error message for form fields without defined error message
children	React.Node or function		if children is a function, this function should return the JSX which contains the form and all inputs

`Form.Element` props

Name	Type	Description
options	Array(string) or Array(shape({label, value}))	if `type` prop includes `select`,`radio` or `checkbox`, this prop is required
label	string	if this prop is filled, `Form.Element` will create a `label` tag with this string
children	React.Node or function	if children is a function, this function should return the JSX which contains the form and all inputs

`Form.Submit` props

Name	Type	Default	Description
text	string	`'Send'`	button text of the form
loadingText	string	`'Sending'`	button text of the form when submit state is loading
children	React.Node or function		if children is a function, this function should return the JSX which contains the form and all inputs

`children` function arguments

Name	Type	Description
showErrorMessage	function	it takes form name as an argument and shows error message for this field
onChange	function	function that controls validation errors on field value change
isLoading	boolean	show submit state condition whether it's loading or not