TrainsForms

All in one React dynamic form builder, make form easier.

Install

npm install trains-forms --save;

// For theme: Semantic UI
npm install semantic-ui-css --save;
import 'semantic-ui-css/semantic.min.css';

// For theme: Bootstrap@4
npm install bootstrap --save;
import 'bootstrap/dist/css/bootstrap.min.css';

Features

1. Render complex form by simple configs.
2. Easily switch between view and edit mode.
3. Built-in support for Semantic UI, Bootstrap.
4. Built-in configurable validations.
5. Built-in configurable error messages.
6. Built-in date picker.
7. Take advantage of standalone field components.

How to use

Demo & Example

Simple Example

import useForm, { FORM_CONSTANTS };

const fields = [
  {
    name: 'form_message',
    type: FORM_CONSTANTS.MESSAGE_TYPE,
    title: 'A simple example of TrainsForm',
  },
  {
    name: 'pet_name',
    type: FORM_CONSTANTS.TEXT_TYPE,
    title: 'Pet Name',
  },
  {
    name: 'pet_type',
    type: FORM_CONSTANTS.RADIO_TYPE,
    title: 'Pet Type',
  },
];

const values = { pet_name: 'Shilee' };

const options = {
  pet_type: [
    { label: 'Dog', value: 1 },
    { label: 'Cat', value: 2 },
    { label: 'Bird', value: 3 },
    { label: 'Other', value: 4 },
  ],
};

const [formRender, {
  getFormDetails,
  resetFormValues,
  validateFormValues,
}] = useForm({
  fields, values, options, mode: FORM_CONSTANTS.EDIT_MODE,
});

return (
  <div>
    {formRender()}
    <button
      onClick={() => {
        const details = getFormDetails();
        console.log(details.isReady, details.values, details.errors);
      }}
    >
      Get form status, values, errors.
    </button>
    <button onClick={resetFormValues}>
      Reset to form initial values.
    </button>
    <button onClick={validateFormValues}>
      Validate all fields and display error messages.
    </button>
  </div>
);

Configuration

Form Props

Form Configs

Field Props