This is a fork to the now unmaintained project react-inline-edit. Only minimal maintainance will be provided, and no new features will be accepted.
Inline Edit Component for React
This is a simple React component for in-place text editing. It turns into an <input />
when focused, and tries to validate and save input on Enter or blur
. Esc works as well for cancelling.
Watch a demo, then check out demo/index.jsx for a quick example.
Installation
npm install --save react-edit-inplace
Required props
text
:string
initial textparamName
:string
name of the parameter to be returned tochange
functionchange
:function
function to call when new text is changed and validated, it will receive{paramName: value}
Optional props
className
:string CSS class nameactiveClassName
:string CSS class replacement for when in edit modevalidate
:function boolean function for custom validation, using this overrides the two props belowminLength
:number minimum text length, default1
maxLength
:number maximum text length, default256
editingElement
:string element name to use when in edit mode (DOM must havevalue
property) defaultinput
staticElement
:string element name for displaying data defaultspan
editing
:boolean If true, element will be in edit modetabIndex
:number tab index used for focusing with TAB key default0
stopPropagation
:boolean If true, the event onClick will not be further propagated.
Usage example
;; Component { superprops; thisdataChanged = thisdataChanged; thisstate = message: 'ReactInline demo' } { // data = { description: "New validated text comes here" } // Update your model from here console this } { return textlength > 0 && textlength < 64; } { return <div> <h2>thisstatemessage</h2> <span>Edit me: </span> <InlineEdit validate=thiscustomValidateText activeClassName="editing" text=thisstatemessage paramName="message" change=thisdataChanged style= backgroundColor: 'yellow' minWidth: 150 display: 'inline-block' margin: 0 padding: 0 fontSize: 15 outline: 0 border: 0 /> </div> }