React component representing an element with editable contents
npm install react-contenteditablereact-contenteditable
=====================
React component for a div with editable contents
``sh`
npm install react-contenteditable
`javascript
import React from 'react'
import ContentEditable from 'react-contenteditable'
class MyComponent extends React.Component {
constructor() {
super()
this.contentEditable = React.createRef();
this.state = {html: "Hello World"};
};
handleChange = evt => {
this.setState({html: evt.target.value});
};
render = () => {
return
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)
/>
};
};
`
attribute|Object \| Function| 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 : `js
const text = useRef('');const handleChange = evt => {
text.current = evt.target.value;
};
const handleBlur = () => {
console.log(text.current);
};
return
`Examples
You can try react-contenteditable right from your browser to see if it fits your project's needs:
* Simple example : just an editable