react-input

4.1.3 • Public • Published

React Input

npm version Build Status Coverage Status npm downloads

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

Events

Event Description
onChange Runs when the value of the input changes. The first parameter is the value.

In addition to the props listed above, all standard HTML input attributes are supported and can be used as props on the inputs.


Copyright 2015 Patrick Burtchaell. Licensed MIT.

Package Sidebar

Install

npm i react-input

Weekly Downloads

172

Version

4.1.3

License

MIT

Last publish

Collaborators

  • pburtchaell