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