Skip to content
React component for a div with editable contents
Branch: master
Clone or download
Latest commit fe7885b Apr 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add onKeyUp to props (#137) Apr 9, 2019
tests Update dependencies Jan 13, 2019
.gitignore Update ignored file Aug 3, 2018
.npmignore Update ignored file Aug 3, 2018
.travis.yml Add tests Aug 3, 2018
LICENSE Add date and name to LICENSE Sep 4, 2017
README.md Update README.md Apr 9, 2019
package-lock.json Bump @types/prop-types from 15.5.9 to 15.7.0 (#154) Mar 4, 2019
package.json bump version Jan 22, 2019
tsconfig.json Switch to typescript Aug 5, 2018

README.md

react-contenteditable

React component for a div with editable contents

Build Status

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
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

Examples

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

You can’t perform that action at this time.