react-contenteditable

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.