0.0.6 • Published 7 years ago
react-label v0.0.6
react-label
Its editable one-line label for React.js, based on "Inline Edit" UX pattern.
Intallation
npm install reacl-labelor
yarn add reacl-labelUsage
import ReactLabel from 'react-label';
<ReactLabel
saveButtonText='Save and Close'
cancelButtonText='Reject'
onChange={ this.onChangeHandler.bind(this) }
value={ this.state.value }
placeholder='Enter your text..'
/>See simple example here
Props
Parameters
| 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 |
Options
| 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 |
Events
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):
.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