React Contenteditable

React component for a div with editable contents
Alternatives To React Contenteditable
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Material Ui87,11714,7568,385a day ago162April 03, 20221,489mitTypeScript
MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
Awesome React Components35,639
a month ago2cc0-1.0
Curated List of React Components & Libraries.
Chakra Ui33,0044763 days ago453September 22, 2022129mitTypeScript
⚡️ Simple, Modular & Accessible UI Components for your React Applications
React Virtualized24,8632,7281,6052 months ago294December 18, 2020501mitJavaScript
React components for efficiently rendering large lists and tabular data
React Bootstrap21,73929,4213,9832 days ago199August 25, 2022170mitTypeScript
Bootstrap components built with React
React Native Web20,7723,2371,3427 days ago335August 30, 202278mitJavaScript
Cross-platform React UI packages
Enzyme19,98351,43526,2413 months ago54December 20, 2019292mitJavaScript
JavaScript Testing utilities for React
React Testing Library17,8432,70718,28510 days ago91May 28, 202227mitJavaScript
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
Bit16,70164a day ago819September 24, 2022147otherTypeScript
A tool for composable software development.
Fluentui15,754658408a day ago1,487September 23, 2022731otherTypeScript
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
Alternatives To React Contenteditable
Select To Compare


Alternative Project Comparisons
Readme

react-contenteditable

React component for a div with editable contents

Build Status download count bundle size license

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:

Popular Reactjs Projects
Popular React Component Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Typescript
Html
Reactjs
React Components
Wysiwyg
Contenteditable