About

react-form-fields contains predefined fields and helper to create your own custom field. Every field contains:

1. label
2. input/select/custom component
3. errors

Installation

1. Run yarn add https://github.com/HealthByRo/react-form-fields
2. Done!

Usage

Storybook

Run yarn start storybook to see storybook with complete list of examples.

Simplest example

TextField is one of predefined fields, all it requires is a name prop:

import{TextField}from'react-form-fields/lib/TextField';…// inside render function<TextFieldname="message"/>

Output html:

<divclass="form-item"><inputtype="text"
id="id_message"
name="message"
class="textfield"
/></div>

Usage with redux-form

For use with Redux Form just add reduxForm at the end of import and pass your props directly to Field component:

import{TextField}from'react-form-fields/lib/TextField/reduxForm';import{Field}from'redux-form';…// inside render function<Fieldname="message"component={TextField}/>

Output html:

<divclass="form-item"><inputtype="text"
id="id_message"
name="message"
class="textfield"
/></div>

Displaying errors

Every field accepts errors prop with an array of strings containing error messages related to the field.

Code:

import{TextField}from'react-form-fields/lib/TextField';…// inside render function<TextFieldname="message"errors={['Error message']}/>

Output html:

<divclass="form-item"><inputtype="text"
id="id_message"
name="message"
class="textfield"
/><divclass="msg msg--error">
Error message
</div></div>

When more than one error message is present, all errors are wrapped with additional <div class="errors-list" /> element:

import{TextField}from'react-form-fields/lib/TextField';…// inside render function<TextFieldname="message"errors={['First error message','Second error message']}/>

Output html:

<divclass="form-item"><inputtype="text"
id="id_message"
name="message"
class="textfield"
/><divclass="errors-list"><divclass="msg msg--error">
First error message
</div><divclass="msg msg--error">
Second error message
</div></div></div>

Displaying label

Every field accepts label prop with a strings containing text to be displayed inside label element: Code:

import{TextField}from'react-form-fields/lib/TextField';…// inside render function<TextFieldname="message"label="Your message"/>

Output html:

<divclass="form-item"><labelfor="customID">
Your message
</label><inputtype="text"
id="id_message"
name="message"
class="textfield"
/></div>

Optional props for all fields

Every field accepts the following optional props:

1. placeholder - text to render inside input element (not yet available for selects)
2. id - optional id that will be used for input + label. Default id is id_ + name in snake_case

Code:

import{TextField}from'react-form-fields/lib/TextField';…// inside render function<TextFieldname="message"placeholder="Enter your message here"id="customID"errors={['Error message']}/>

Output html:

<divclass="form-item"><inputtype="text"
id="customID"
name="message"
placeholder="Enter your message here"
class="textfield"
/><divclass="msg msg--error">
Error message
</div></div>

Creating custom field with createFormField

When no predefined fields matches your requirements, use createFormField to make your own.

Code:

importcreateFormFieldfrom'react-form-fields/lib/createFormField';constCustomInput=(props)=>(<input{...props}type="tel"className="customInputClassName"/>);constCustomField=createFormField(CustomInput);…// inside render function<CustomFieldname="phoneNumber"label="Phone number"placeholder="Enter your phone number"/>

Output html:

<divclass="form-item"><labelfor="id_phone_number">
Phone number
</label><inputtype="tel"
id="id_phone_number"
name="phoneNumber"
placeholder="Enter your phone number"
class="customInputClassName"
/></div>

Creating custom field for redux-form with createReduxFormField

In order to be able to use CustomField created with createFormField in Redux Form, simpy pass output of createReduxFormField(CustomField) as a component param of Field:

importcreateFormFieldfrom'react-form-fields/lib/createFormField';importcreateReduxFormFieldfrom'react-form-fields/lib/createReduxFormField';constCustomInput=(props)=>(<input{...props}type="tel"className="customInputClassName"/>);constCustomReduxField=createReduxFormField(createFormField(CustomInput));…// inside render function<Fieldname="message"component={CustomReduxField}/>

Output html:

<divclass="form-item"><inputtype="text"
id="id_message"
name="message"
class="textfield"
/></div>

Available fields

Regular fields

importTextFieldfrom'react-form-fields/lib/TextField';importEmailFieldfrom'react-form-fields/lib/EmailField';importPasswordFieldfrom'react-form-fields/lib/PasswordField';importMonthSelectFieldfrom'react-form-fields/lib/MonthSelectField';importYearSelectFieldfrom'react-form-fields/lib/YearSelectField';

Redux Form fields

importTextFieldfrom'react-form-fields/lib/TextField/reduxForm';importEmailFieldfrom'react-form-fields/lib/EmailField/reduxForm';importPasswordFieldfrom'react-form-fields/lib/PasswordField/reduxForm';importMonthSelectFieldfrom'react-form-fields/lib/MonthSelectField/reduxForm';importYearSelectFieldfrom'react-form-fields/lib/YearSelectField/reduxForm';

Available Props

prop name	optional	value	applies to	description
className	optional	string	all except selects	class attribute of input element
count	optional	string or number	YearSelectField	how many years to display
defaultValue	optional	string	all	initial value of input or select element
errors	optional	array	all	error messages displayed below field
id	optional	string	all	id attribute of input element, htmlFor attribute of label element
label	optional	string	all	text of label element
max	optional	string or number	YearSelectField	latest year that can be displayed
min	required	string or number	YearSelectField	first year that should be displayed
mode	optional	`full	numbers	short`
name	required	string	all	name attribute of input element
placeholder	optional	string	all except selects	placeholder attribute of input element
step	optional	string or number	YearSelectField	how many years between displayed options, default is 1
any prop	optional	any value	all	any custom prop will be copiet do input or select element