Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

reactjs-content-editable

libinprasanth23MIT1.0.2TypeScript support: included

React content editable component

react, typescript, content-editable, react-content-editable

readme

react-content-editable

It's React component which support content editable div

Install

npm install reactjs-content-editable

Usage

import React, { useState } from 'react';
import { ContentEditable } from "reactjs-content-editable";

function App() {
  const [html, setHtml] = useState("")
  return (
    <>
      <ContentEditable 
        html={html} 
        onChange={(value: string) => setHtml(value)} 
      />
    </>
  );
}

export default App;

Available props

prop description type
html required: innerHTML of the editable element String
disabled use true to disable editing Boolean
onChange called whenever innerHTML changes Function
className there is no default className are given, you can add your own String
style style properties which support react style format, by default height is set to 200px Object
innerRef if you want to control the element, you can pass ref LegacyRef<HTMLDivElement>

Support

If you are facing any issue, please contact via linkedin ( Libin Prasanth ).

Examples

Do you want to try react-content-editable before use ?

Like my Work! Donate