npm install react-input   
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.
Install the component via npm: npm install react-input.
``
{
name: 'Email',
key: 'email',
type: 'email',
error: false,
required: false,
placeholder: 'Enter an email',
onChange: value => {
// handle a changed value on the input
},
renderAfter: () => (
Include an element after the input, which is useful for instructional text or strength meters for passwords
),
renderBefore: () => (
Include an element before the input
)
},
// 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.
| 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 |.is-rejected
| isRejected | boolean | If true, an class is added to the form | | null |.is-fulfilled
| isFulfilled | boolean | If true, an 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.
| 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. |
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.