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