Inline Edit Component for React

Before you continue, check out a successor to this repo: React Inline Edit Kit. It is more functional, and will be maintained in future.

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 react-edit-inline --save-dev

Required props

• text:string initial text
• paramName:string name of the parameter to be returned to change function
• change:function function to call when new text is changed and validated, it will receive {paramName: value}

Optional props

• className:string CSS class name
• activeClassName:string CSS class replacement for when in edit mode
• validate:function boolean function for custom validation, using this overrides the two props below
• minLength:number minimum text length, default1
• maxLength:number maximum text length, default256
• editingElement:string element name to use when in edit mode (DOM must have value property) defaultinput
• staticElement:string element name for displaying data defaultspan
• editing:boolean If true, element will be in edit mode
• tabIndex:number tab index used for focusing with TAB key default0
• stopPropagation:boolean If true, the event onClick will not be further propagated.

Usage example

importReactfrom'react';importInlineEditfrom'react-edit-inline';classMyParentComponentextendsReact.Component{constructor(props){super(props);this.dataChanged=this.dataChanged.bind(this);this.state={message: 'ReactInline demo'}}dataChanged(data){// data = { description: "New validated text comes here" }// Update your model from hereconsole.log(data)this.setState({...data})}customValidateText(text){return(text.length>0&&text.length<64);}render(){return(<div><h2>{this.state.message}</h2><span>Edit me: </span><InlineEditvalidate={this.customValidateText}activeClassName="editing"text={this.state.message}paramName="message"change={this.dataChanged}style={{backgroundColor: 'yellow',minWidth: 150,display: 'inline-block',margin: 0,padding: 0,fontSize: 15,outline: 0,border: 0}}/></div>)}}