Notable Pottery Manufacturer
    Have ideas to improve npm?Join in the discussion! »

    react-contenteditable
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.5 • Public • Published

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

    Install

    npm i react-contenteditable

    DownloadsWeekly Downloads

    55,442

    Version

    3.3.5

    License

    Apache-2.0

    Unpacked Size

    81.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar