Generate form from JSON

Declare fields

const fields = [
  {
    name: 'firstName',
    label: 'First Name',
    type: 'text',
    validations: [
      {
        rule: 'required',
        params: ['Required'],
      }
    ],
  },
  {
    name: 'email',
    label: 'Email',
    type: 'text',
    validations: [
      {
        rule: 'required',
      },
      {
        rule: 'email',
        params: ['Incorrect email'],
      },
    ],
  },
  {
    name: 'password1',
    label: 'Password',
    type: 'password',
    validations: [
      {
        rule: 'required',
      },
      {
        rule: 'min',
        params: [2, 'Too short'],
      },
      {
        rule: 'max',
        params: [8, 'Too Long'],
      },
    ],
  },
  {
    name: 'password2',
    label: 'Password',
    type: 'password',
    validations: [
      {
        rule: 'fields-match',
        params: ['password1', 'Do not much'],
      },
    ],
  },
  {
    name: 'state',
    label: 'State',
    type: 'select',
    options: states.map(s => ({ value: s.abbr, label: s.name })),
    validations: [
      {
        rule: 'required',
      },
    ],
  },
  {
    name: 'submit',
    label: 'Submit',
    type: 'element',
    element: (<button>submit</button>),
  },
];

Use hook

import { useGeneratedForm } from 'react-form-dynamic';
const App = () => {
  const handleSubmit = () => {
    console.log('Form submitted!');
  };
  const [formElements, formik] = useGeneratedForm(fields, handleSubmit);
  return (
    <form onSubmit={formik.handleSubmit}>
      {formElements}
    </form>
  );
};

useForm hook

You can generate form manualy using useForm hook

import { useForm } from 'react-form-dynamic';

const fields = [
  {
    name: 'firstName',
    label: 'First Name',
    validations: [
      {
        rule: 'required',
        params: ['Required'], // Error message will be "First Name is a required field"
      }
    ],
  },
  {
    name: 'lastName',
    label: 'Last Name',
    validations: [
      {
        rule: 'required',
        params: ['Required', 'Last Name is strictly required'], // Custom error message
      }
    ],
  },
];

const App = () => {
  const onSubmit = () => {
    console.log('Form submitted!');
  };
  const formik = useForm({fields, onSubmit});
  return (
    <form onSubmit={formik.handleSubmit}>
      <Input name="firstName" formik={formik}>
      <Input name="lastName" formik={formik}>
    </form>
  );
};

fields structure

fields

Field	Description
type	Type of the form element	select, text, number, email, element...
name	Name of the element.Also used as a key
initialValue	Default value of the field
label	Label of the form element
validations	An array with the list of validations
element	React.element. Used when type is element	Ex. (<button>submit</button>)

validation

Field	Description
rule	Validation rule's name. Mostly using yup rules.	Possible values: required, min, max, fields-match...
params	Param for rule. Can be custom error message.