@lapa/react-contenteditable
v3.3.0
Published
React component representing an element with editable contents
Downloads
2
Maintainers
Readme
react-contenteditable
React component for a div with editable contents
Install
npm install react-contenteditable
Usage
import ContentEditable from 'react-contenteditable'
class MyComponent extends React.Component {
constructor() {
super()
this.state = {html: "<b>Hello <i>World</i></b>"};
};
handleChange = evt => {
this.setState({html: evt.target.value});
};
render = () => {
return <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)
/>
};
};
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.