@infotition/react-contenteditable

React contenteditable component

A small and simple react component representing an element with editable contents
Explore the docs »

View Package · Report Bug · Request Feature

Getting started

The ContentEditable component takes various props to render a custom component with editable content. It is written for modern react using react hooks. But why should you need something like this? Maybe you want to create a rich text editor with headings, bold text and stuff like this. This component renders the html string inline as real html, so you can embed everything in this element.

import { ContentEditable } from '@infotition/react-contenteditable';
import { useState, FunctionComponent } from 'react';

type EditorProps = { initialContent: string; }

const Editor: FunctionComponent<EditorProps> = ({initialContent}) => {
  const [content, setContent] = useState(initialContent);
  return <ContentEditable html={content} onChange={setContent} />;
}

export default Editor;

For more information about props, performance considerations and other useful information, please visit the official docs.

Docs

Read full docs on GitHub.