WARNING

This is a fork of the ReactInlineEdit (or react-edit-inline) from
React Inline Edit Kit.

I applied Pull #41
so it would work with React 16.x.x without the need to do anything more.

I uploaded that newer version on npm as react-edit-inline2 so you can
directly use that (see Installation below.)

All I've done really is rename the package and upload it to npm. Also
I don't really intend to support it in any way. I just wanted to use
it for a my fun TODO project.

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 when focused, and tries to validate and save
input on Enter or blur. Esc works as well
for cancelling.

!Example animation gif

Watch a demo,
then check out demo/index.jsx for a quick example.

$3

npm install react-edit-inline2 --save-dev

$3

- 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}

$3

- 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, default 1
- maxLength:_number_ maximum text length, default 256
- editingElement:_string_ element name to use when in edit mode (DOM must
have value property) default input
- staticElement:_string_ element name for displaying data default span
- editing:_boolean_ If true, element will be in edit mode
- tabIndex:_number_ tab index used for focusing with TAB key default 0
- stopPropagation:_boolean_ If true, the event onClick will not be further
propagated.

$3

``javascript
import React from 'react';
import InlineEdit from 'react-edit-inline2';

class MyParentComponent extends React.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 here
console.log(data)
this.setState({...data})
}

customValidateText(text) {
return (text.length > 0 && text.length < 64);
}

render() {
return (

)
}
}
``