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 | Default | 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 |

Development

npm install
npm start

Example

npm start and then go to http://localhost:3001/

License

react-basic-form is released under the MIT license.