React component for a div with editable contents
npm install react-contenteditableimport 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)
/>
};
};| 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 |
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.