JarCastingreact-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 |
| 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:
- Simple example : just an editable
<div>with a default value. - Advanced example : custom tag, input sanitization, and rich text edition.