react-contenteditable

React component for a div with editable contents

Install

npm install react-contenteditable

Usage

import React from 'react'
import ContentEditable from 'react-contenteditable'

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

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

  render = () => {
    return <ContentEditable
              innerRef={this.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)
            />
  };
};

Available props

|prop|description|type| |--|----|----| |innerRef|element's ref attribute|Object | Function| |html|required: innerHTML of the editable element|String| |disabled|use true to disable editing|Boolean| |onChange|called whenever innerHTML changes|Function| |onBlur|called whenever the html element is blurred|Function| |onFocus|event fires when an element has received focus|Function| |onKeyUp|called whenever a key is released|Function| |onKeyDown|called whenever a key is pressed |Function| |className|the element's CSS class|String| |style|a collection of CSS properties to apply to the element|Object|

Known Issues

If you are using hooks, please see this issue. Using this component with useState doesn't work, but you can still use useRef :

const text = useRef('');

const handleChange = evt => {
    text.current = evt.target.value;
};

const handleBlur = () => {
    console.log(text.current);
};

return <ContentEditable html={text.current} onBlur={handleBlur} onChange={handleChange} />

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.