@cosva-lab/form-builder NPM

@cosva-lab/form-builder

React form builder.

Install

npm install --save @cosva-lab/form-builder

Usage

import React from 'react';
import {
  FieldsRender,
  FieldsBuilder,
  FieldTranslateProvider,
} from '@cosva-lab/form-builder';
import { Grid, Button, ButtonGroup } from '@material-ui/core';

export default function App() {
  const [fieldsBuilder] = React.useState(
    new FieldsBuilder({
      validate: false,
      fields: [
        {
          name: 'name',
          label: 'Name',
          value: '',
          breakpoints: {
            sm: 6,
          },
          validChange: true,
          validations: [
            {
              rule: 'isEmpty',
              message: 'This field can not be empty',
            },
          ],
        },
        {
          name: 'birth_date',
          label: 'Birth date',
          type: 'date',
          value: '',
          breakpoints: {
            sm: 6,
          },
          validations: [
            {
              rule: 'isEmpty',
              message: 'This field can not be empty',
            },
          ],
        },
        {
          name: 'email',
          label: 'Email',
          value: '',
          breakpoints: {
            sm: 6,
          },
          validations: [
            {
              rule: 'isEmail',
              message: "This field don't is email",
            },
          ],
        },
      ],
    }),
  );
  const {
    fields,
    changeField,
    validate,
    restoreLast,
    saveData,
    restore,
  } = fieldsBuilder;

  return (
    <FieldTranslateProvider translator={({ message }) => message}>
      <Grid container>
        <ButtonGroup
          fullWidth
          aria-label="full width outlined button group"
        >
          <Button
            color="default"
            onClick={async () => {
              restore();
            }}
          >
            Reset
          </Button>
          <Button
            color="default"
            onClick={async () => {
              restoreLast();
            }}
          >
            Restore
          </Button>
          <Button
            color="default"
            onClick={async () => {
              saveData();
            }}
          >
            Save
          </Button>
        </ButtonGroup>
      </Grid>
      <Grid container spacing={4}>
        <FieldsRender
          {...{
            fields,
            changeField: changeField(),
            validate,
          }}
        />
      </Grid>
      <Grid container justify="flex-end">
        <Button
          variant="outlined"
          color="primary"
          onClick={() => {
            fieldsBuilder.hasErrors({
              setErrors: true,
            });
          }}
        >
          Validate
        </Button>
        <Button
          variant="outlined"
          color="secondary"
          onClick={async () => {
            if (!(await fieldsBuilder.hasErrors())) {
              console.log(fieldsBuilder.getFieldsObject());
            }
          }}
        >
          Get Values
        </Button>
      </Grid>
    </FieldTranslateProvider>
  );
}