Package Exports

react-contenteditable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-contenteditable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 editing
              onChange={this.handleChange} // handle innerHTML change
              tagName='article' // Use a custom HTML tag (uses a div by default)
            />
  };
};

Examples

You can try react-contenteditable right from your browser to see if it fits your project's needs:

Simple example : just an editable <div> with a default value.
Advanced example : custom tag, input sanitization, and rich text edition.