JSPM

react-label

0.0.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 378
  • Score
    100M100P100Q84892F
  • License MIT

Its editable one-line UX label for React.js

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