A simple React inline editing component.
This is an inline, editable text/label component built in React.
The <EditableLabel />
allows the user to simply click and edit text inline. It consists of a <label>
element to display the unedited text and an <input />
element to allow editing.
Installation
npm install --save react-inline-editing
Component props
* Required
Prop | Type | Description |
---|---|---|
text (*) | string | Text to be displayed on both the label and initially in the editor |
isEditing | bool | Flags whether the label should be in editor mode |
labelClassName | string | Class name for the text styling |
labelFontSize | string | Font size for the text |
labelFontWeight | string | Font weight for the text |
inputMaxLength | number | Max length for the input in editing mode |
inputPlaceHolder | string | Placeholder for the input in editing mode |
inputWidth | string | Width of the input in editing mode |
inputHeight | string | Height of the input in editing mode |
inputFontSize | string | Font size for the input in editing mode |
inputFontWeight | string | Font weight for the input in editing mode |
inputClassName | string | Class name for the input editor's styling |
inputBorderWidth | string | Border width for the input in editing mode |
onFocus | function | Callback for text focusing. Parameter(s): text |
onFocusOut | function | Callback for focus leaving editor. Parameter(s): text |
Example
;;; Component { superprops; this_handleFocus = this_handleFocus; this_handleFocusOut = this_handleFocusOut; } { console; } { console; } { return <div> <EditableLabel text='Hello!' labelClassName='myLabelClass' inputClassName='myInputClass' inputWidth='200px' inputHeight='25px' inputMaxLength='50' labelFontWeight='bold' inputFontWeight='bold' onFocus=this_handleFocus onFocusOut=this_handleFocusOut /> </div> } ReactDOM;