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

Name	Value	Effect	Default
fields	Array: field definition objects	Render form field accordingly.	[]
Values	Object: field name/value pairs	Object keys come from field names, object values turn into field values.	{}
Options	Object: options for select type fields	Object keys come from field names, object values(Array: Objects contain label and value keys) turn into field options.	{}
Mode	'View'/'Edit'	Render fields for display/edit purpose.	'Edit'
Theme	'Semantic'/'Bootstrap'	Determine overall styles used for form.	'Semantic'
isLoading	Boolean	Disable all fields and show loading effect while true.	false
onSubmit	Function	Built-in submit button will be rendered when provided, and this function will be called with form values if there's no validation error after submit button clicked.	null

Form Configs

Name	Value	Effect	Default
spacing	Number	Spacing used among fields by px.	20
innerSpacing	Number	Spacing used among fields by px.	10
validateOnInitial	Boolean	Determine should validate fields on initial form or not.	false
validateOnChange	Boolean	Determine should validate field on value changes or not. This will not affect validation on submit.	true
viewAsMessage	Boolean	Display fields in view mode as plain messages rather than disabled fields.	false
submitTitle	String	Customize the name of submit button.	'Submit'
submitError	String	Customize the content of error message when submit error occurs.	'Please check your inputs!'
requiredError	String	Customize the content of error message on required fields globally.	'This field is required.'

Field Props

Name	Value	Effect	Default	Available to field types
width	Number	Determine the width of a field by percentage in a row.	100	Message, Text, Email, Number, Integer, Quantity, Password, Note, Toggle, Radio, Checkbox, Items, SingleSelect, Switch, Date
placeholder	String	Define the placeholder value of a field.		Text, Email, Number, Integer, Password, Note, Toggle, SingleSelect, Items,
default	Any(According to field type)	Default value to be used if field value not provided by form values object.		Message, Text, Email, Number, Integer, Quantity, Note, Toggle, Radio, Checkbox, Items, SingleSelect, Switch, Date
disabled	Boolean	Determine a field is editable or not in Edit mode.	false	Message, Text, Email, Number, Integer, Quantity, Password, Note, Toggle, Radio, Checkbox, Items, SingleSelect, Switch, Date
required	Boolean	Determine a field is required or not.	false	Message, Text, Email, Number, Integer, Quantity, Password, Note, Toggle, Radio, Checkbox, Items, SingleSelect, Switch, Date
requiredError	String	Define the content of error message for require validation.	(Same as Form Configs requiredError)	Message, Text, Email, Number, Integer, Quantity, Password, Note, Toggle, Radio, Checkbox, Items, SingleSelect, Switch, Date
match	Regx	Require value match the regx provided.		Text, Password, Note
matchError	String	Define the content of error message for regx validation.	`Regx: ${field.match}`	Text, Email, Password, Note
min	Number	Min character required.		Text, Email, Password, Note
		Min number required.		Number, Integer, Quantity
		Min selection required.		Checkbox
	Date	Min date required.		Date
minError	String	Define the content of error message for min validation.	`Minimum ${field.min} characters required.`	Text, Email, Password, Note
			`Number is required to be no less than ${field.min}.`	Number, Integer, Quantity
			`Minimum ${field.min} selection required.`	Checkbox
			`Date is required to be no earlier than ${field.min}.`	Date
max	Number	Max character allowed.		Text, Email, Password, Note
		Max number allowed.		Number, Integer, Quantity
		Max selection allowed.		Checkbox
	Date	Max date allowed.		Date
maxError	String	Define the content of error message for max validation.	`Maximum ${field.max} characters allowed.`	Text, Email, Password, Note
			`Number is required to be no greater than ${field.max}.`	Number, Integer, Quantity
			`Maximum ${field.max} selection allowed.`	Checkbox
			`Date is required to be no later than ${field.max}.`	Date