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

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