react-contenteditable

React component for a div with editable contents

Install

npm install react-contenteditable

Usage

import ContentEditable from "react-contenteditable";

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { html: "<b>Hello <i>World</i></b>" };
  }

  handleChange = evt => {
    this.setState({ html: evt.target.value });
  };

  render = () => {
    return (
      <ContentEditable
        html={this.state.html} // innerHTML of the editable div
        disabled={false} // use true to disable edition
        onChange={this.handleChange} // handle innerHTML change
        placeholder="Enter text..." // placeholder text
      />
    );
  };
}

Structure of this repository

• lib/ compiled javascript, usable directly in the browser
• src/ source javascript. Uses JSX and ES6.