Its editable one-line UX label for React.js
npm install react-labelsh
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
``