Home

Awesome

react-contenteditable

React component for a div with editable contents

Build Status download count bundle size license

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

propdescriptiontype
innerRefelement's ref attributeObject | Function
htmlrequired: innerHTML of the editable elementString
disableduse true to disable editingBoolean
onChangecalled whenever innerHTML changesFunction
onBlurcalled whenever the html element is blurredFunction
onFocusevent fires when an element has received focusFunction
onKeyUpcalled whenever a key is releasedFunction
onKeyDowncalled whenever a key is pressedFunction
classNamethe element's CSS classString
stylea collection of CSS properties to apply to the elementObject

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: