Installation

npm install react-inline-editable-field --save

Required props

onBlur: function function to call when new text is changed.

Optional props

style: Style of editable container inputStyle: Style of editable text box className: Class of your editable container content: Initial content placeholder: Default placeholder if no content inputType: Type of input (text or textarea) , default is text

Example

import React from "react";
import InlineEditable from "react-inline-editable-field";

export default class Comments extends React.Component {
 constructor(props, context) {
  super(props, context);
   this.state = {}
 }

updateListing(isChanged,val){
  this.setState({myValue: val});
}

render() {
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <InlineEditable
                content={this.state.myValue}
                inputType = "textarea"
                displayPlaceholder="Enter text here.."
                onBlur={(val, isChanged) => {this.updateListing(isChanged, val)}}
                style={{width: '200px'}}
                inputStyle={{width: '500px'}}
                className = "customClassName"
              />
            </td>
           </tr>
        </tbody>
      </table>
    </div>
   );
  }
}