Popularity
6.1
Growing
Activity
4.8
-
848
14
166

Monthly Downloads: 0
Programming language: JavaScript
Latest version: v3.3.4

react-contenteditable alternatives and similar libraries

Based on the "Rich Text Editor" category

Do you think we are missing an alternative of react-contenteditable or a related project?

Add another 'Rich Text Editor' Library

README

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

prop description type
innerRef element's ref attribute Object \
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

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:


*Note that all licence references and agreements mentioned in the react-contenteditable README section above are relevant to that project's source code only.