react-label

Its editable one-line label for React.js, based on "Inline Edit" UX pattern.

Intallation

``sh
npm install reacl-label
`
or
`sh
yarn add reacl-label
`

Usage

`javascript
import ReactLabel from 'react-label';

saveButtonText='Save and Close'
cancelButtonText='Reject'
onChange={ this.onChangeHandler.bind(this) }
value={ this.state.value }
placeholder='Enter your text..'
/>
`

See simple example here

Props

$3

| Name | Type | Description |
| ---- | ---- | ----------- |
| value | String | Value that shows on label and inside text input |
| saveButtonText | String | Save button title |
| cancelButtonText | String | Save button title |
| placeholder | String | Sets placeholder of text input |
| className | String | Class name for main container |
| classNameViewPanel | String | Class name for view panel (clickable text label) |
| classNameEditPanel | String | Class name for edit panel (with text input and buttons) |
| classNameInput | String | Class name for text input |
| classNameSaveButton | String | Class name for save button |
| classNameCancelButton | String | Class name for cancel button |

$3

| Name | Type | Description |
| ---- | ---- | ----------- |
| disableView | Boolean | When its parameter equals true, view label will not avaible for mouse clicking |
| disableEdit | Boolean | Its parameter define text input "disable" prop |
| showRejectButton | Boolean | Shows disable button optional |

$3

There are methods, whose names speak for themselves:

| Name | Type |
| ---- | ---- |
| onChange | Function |
| onFocusInput | Function |
| onBlurInput | Function |
| onSave | Function |
| onCancel | Function |
| onEditModeEnter | Function |
| onViewModeEnter | Function |

Custom styles

You may set class names from css-modules by these props: className, classNameViewPanel, classNameEditPanel, classNameInput, classNameSaveButton, classNameCancelButton

Also you may override css styles of react-label DOM elements (BEM):
`css
.react-label
.react-label__panel
.react-label__panel_view
.react-label__panel_edit
.react-label__input
.react-label__button
.react-label__button_cancel
.react-label__button_save
``