react-forms-element

React forms element

Flexible and customizable component to create forms easily.

Demo

There is a demo with some examples and a form creator here. The repo with the code is this one.

Quickstart

import React, { FunctionComponent, ReactElement } from 'react';
import './App.scss';
import { FormComponent, Field } from 'react-forms-element';

const validatePassword = (password: string): string => {
  return password.length < 6 ? 'short_pwd' : '';
}

const App: FunctionComponent = (): ReactElement => {
  const fields: Field[] = [
    { content: <div><h1>FORM EXAMPLE</h1></div>, type: 'custom' },
    { value: '', label: 'Name', name: 'name', type: 'string', required: true },
    { value: '', label: 'Password', name: 'pwd', type: 'password', required: true, customValidator: validatePassword, inputType: 'password' },
    { value: '', label: 'Business', name: 'business', type: 'checkbox', required: true }
  ];
  const errors = {
    short_pwd: 'Password too short'
  };

  const onSubmit = (form: any): any => console.log(form);

  return <div className="App">
      <FormComponent fields={fields} onSubmit={onSubmit} errors={errors} />
  </div>;
};

export default App;

Props and model

Default errors

Name	Default	Description
required_field	Required field	Error message to show when a field is not set and is required.
wrong_email	Wrong email format	Error message to show when a field is of type email and the format is wrong.
wrong_number	Wrong number format	Error message to show when a field is of type number and the value is not a number.
wrong_min_n	Min value is n	Error message to show when a field is of type number and the value is lower than the min.
wrong_max_n	Max value is n	Error message to show when a field is of type number and the value is higher than the max.
no_selected	Select one option	Error message to show when a field is of type select and no option is selected.
no_file_selected	Select a file	Error message to show when a field is of type file and no file is selected.

FormComponent props

Name	Type	Required	Default	Description
fields	Field[]	true	-	The array of fields to create the form and display.
onSubmit	Function	true	-	The function to call when the form is submitted. It can return a JSON with errors where the key is the field name and the value the error code, if you want to show a non specific field error set the message in the generalError property of the JSON.
className	string	false	-	The class to add to the form main div.
errors	Record<string, string>	false	Default errors ↑	A JSON containing the error messages, if one of above is specified it will be used, if not the default will be used. If one of your custom validations return a custom message it has to be added in this JSON (if it is not found the form will show the returned string).
calendarLocale	any	false	date-fns/locale/en-US	The calendar config for the date input, use the date-fns/locale option you need (check th examples).
submitButtonText	string	false	SEND	The submit button text.

Field model

Name	Type	Required	Default	Description
name	string	true	-	Name of the field, the returned JSON on submit will have the according value in this field. It MUST be unique.
value	any	false	-	Value of the field when creating the form, more details in the next table.
type	'string' | 'textarea' | 'number' | 'select' | 'date' | 'checkbox' | 'file' | 'email' | 'checkbox-list' | 'list' | 'custom'	false	string	Type of the field that determines the type of input.
className	string	false	-	Class to add to the field container.
placeholder	string	false	-	Placeholder of the input.
title	string	false	-	Title for the fields of type list.
addButton	string	false	ADD	Text of the submit button for a list field.
label	string | ReactElement	false	-	Label for the field.
required	boolean	false	false	Whether the field is required or not.
fileType	string	false	-	Accepted file types.
multipleFiles	boolean	false	false	Whether to allow multiple file selection or not.
multipleSelected	boolean	false	false	Wheter to allow multiple option selection or not.
inputType	string	false	-	Type of the HTML input (for example, set tel if you want to display numbers keyboard in mobile devices).
customValidator	Function	false	-	A function to validate the field, it will be executed on blur and on submit. If it returns a string or a Promise, the field error will contain this string, if not the default validation will be executed.
content	ReactElement	false	-	The content to show for fields whose type is custom.
options	{label: any, value: any}[]	false	-	The array of options to show for a select or a checkbox-list input.
min	number	false	-	The min value of the input.
max	number	false	-	The max value of the input.
step	number	false	-	The step of the input for number fields.
mobileCalendar	boolean	false	-	Whether to show a different mobile friendly calendar or not when the screen width is small.
minDate	Date	false	-	Min date for date input.
maxDate	Date	false	-	Max date for date input.
onChange	Function	false	-	Function to call when the field value changes.
onBlur	Function	false	-	Function to call when the field blur event is triggered.
fields	Field[]	false	-	Fields to show for a list component, more details in the next table.
showInList	boolean	false	-	Fields of type list show a table with the current value, only the values of the fields with showInList as true will be shown.
listLabel	string	false	-	Fields of type list show a table with the current value, listLabel will be shown in the table header. If it is not defined label will be set as header for this field.
formatDate	Function	false	-	Function to call when showing a date in the list table of values.
dateFormat	string	false	dd/MM/yyyy	Date format for the date input.
onSubmit	Function	false	-	Function called when the form of a list element is submitted.

Field types

Type	Accepted values	Description
string	string	The string value.
textarea	string	The string value.
email	string	The email value.
number	string | number	The number value, if it is not a valid number the validation will fail.
email	string	The email value.
select	any	The selected value of the select input when it is not multipleSelected.
select	any[]	The array of the selected values of the select input when it is multipleSelected.
date	Date	The date value.
checkbox	boolean	The checkbox value.
checkbox-list	string[]	The checkbox selected values.
file	File | string	The File object or an url of the file.
file	File[] | string[]	The array of file objects or urls.
list	any[]	The array of custom objects.

Custom styling

Provide a className attribute to the field you want to style or override the classes used by default:

Class	Element
form-component	The main div that contains the form.
field	Container of the input.
input-error	Set to the input elements to paint the border when there is an error.
title	Title of the a list field.
submit-container	Container of the submit button.
error	Error messages.
select-component	Container of the select input.
date-component	Container of the date input.
file-component	Container of the file input.
list-component	Container of the list input.
checkbox-component	Container of the checkbox input.

Support

Did you enjoy React Forms Element? Do you find it useful? Feel free to contribute and buy me a cup of coffee if you want to help!