react-inline-input

> An inline editable input component for React.

Displays as text and becomes editable by clicking or tapping.

!Example

You can read how it was built here

Installation

``js
npm install react-inline-input
`

$3

`html

`

$3

`js
import InlineInput from 'react-inline-input';
`

Usage

Once installed, it can be used in a template as:

`html

`

See the props table below for the available options.

$3

| Property | Type | Description | Default |
|:--|:--|:--|:--|
| onBlur | function | Called when the input element has lost focus | null |
| onInput | function | Called when the input value (or selection if type is 'select') changes | null |
| type | string | The input type. Could be text, number, textarea or select | text |
| placeholder | string | Text to be shown as a placeholder while there is no input | empty string |
| labelClasses | string | CSS classes for the label element | empty string |
| inputClasses | string | CSS classes for the input element | empty string |
| rows | integer | Textarea rows | 2 |
| cols | integer | Textarea columns | 20 |
| options | array | Provides the options for selects. Each object should have the format {label: x, value: x}` | [] |

License

MIT