React-input NPM

React Input

Overview

React input is a lightweight, dependency free component for building forms in React without having to think about what happens under the hood. It uses one component and an array of objects that describe the inputs in the form.

Usage

Install the component via npm: npm install react-input.

<Form
  fields={[
    {
      name: 'Email',
      key: 'email',
      type: 'email',
      error: false,
      required: false,
      placeholder: 'Enter an email',
      onChange: value => {
        // handle a changed value on the input
      },
      renderAfter: () => (
        <div>Include an element after the input, which is useful for instructional text or strength meters for passwords</div>
      ),
      renderBefore: () => (
        <div>Include an element before the input</div>
      )
    },
    // additional inputs to include in the form
  ]}
  onChange={state => /* handle form change */ }
  onSubmit={state => /* handle form submit */ }
/>

For a detailed example, see the example project.

Form Props

Name	Type	Description	Required	Default
fields	array	Array of inputs to include	true
labels	boolean	If false, labels are disabled		true
isPending	boolean	If true, an `.is-pending` class is added to the form		null
isRejected	boolean	If true, an `.is-rejected` class is added to the form		null
isFulfilled	boolean	If true, an `.is-fulfilled` class is added to the form		null

The isPending, isRejected and isFulfilled props are useful to add different styles to the form for different states.

Form Events

Event	Description
onChange	Runs when any input in the form changes. The first parameter is the state of the form after the change.
onSubmit	Runs when the submit button is clicked. The first parameter is the current state of the form.

Input Properties and Events

Only text based inputs can be used, e.g., email, text, tel and password.

Properties

Name	Type	Description	Required	Default
key	string	Unique key for the field	true
type	string	The type of input		`'text'`
name	string	The name of input
label	boolean	Label for the input field		true
required	boolean	Make field required		true
error	boolean	Is the input in an error state?		false
renderAfter	function	Element to render after the input
renderBefore	function	Element to render before the input