Package Exports
- react-label
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-label) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-label
Its editable one-line label for React.js, based on "Inline Edit" UX pattern.
Intallation
npm install reacl-label
or
yarn add reacl-label
Usage
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