React component for a div with editable contents
npm install react-contenteditable
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)
/>
};
}; 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
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} />
You can try react-contenteditable right from your browser to see if it fits your project's needs:
<div> with a default value.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4