React Basic Contenteditable

A React component that allows you to create an editable area in your application. It's perfect for situations where you need to provide a user-friendly, in-place editing functionality.

Installation

Install via npm

npm install --save react-basic-contenteditable

or yarn

yarn add react-basic-contenteditable

Usage

Live demo at https://chrisuser.github.io/react-basic-contenteditable/

Example

import ContentEditable from "react-basic-contenteditable"

const App = () => {
  const [content, setContent] = useState("")

  return (
    <div>
      <div>{content}</div>
      <ContentEditable
        placeholder="Type here"
        containerClassName="container-class"
        contentEditableClassName="contenteditable-class"
        placeholderClassName="placeholder-class"
        onChange={(content) => setContent(content)}
      />
    </div>
  )
}

export default App

Ref & Imperative API

The component supports forwardRef to expose an imperative handle for programmatic control.

import { useRef } from "react"
import ContentEditable from "react-basic-contenteditable"
import type { ContentEditableHandle } from "react-basic-contenteditable"

const App = () => {
  const editorRef = useRef<ContentEditableHandle>(null)

  return (
    <>
      <ContentEditable ref={editorRef} placeholder="Type here" />
      <button onClick={() => editorRef.current?.focus()}>Focus</button>
      <button onClick={() => editorRef.current?.insertAtCaret("👋")}>
        Insert emoji
      </button>
      <button onClick={() => editorRef.current?.clear()}>Clear</button>
    </>
  )
}

Available methods:

Method	Return	Description
focus()	void	Focuses the editable element
blur()	void	Removes focus from the editable element
insertAtCaret(text)	void	Inserts text at the current cursor position
clear()	void	Clears all content
getCaretPosition()	number	Returns the current cursor offset

Props

All props are optional, that's how you can fully customize it!

Name	Optional	Type	Description
containerClassName	✔️	string	Custom classes for the wrapper div
contentEditableClassName	✔️	string	Custom classes for the input element
placeholderClassName	✔️	string	Custom classes for the placeholder text
charsCounterClassName	✔️	string	Custom classes for the character counter text (if maxLength is specified)
placeholder	✔️	string	Input placeholder text
disabled	✔️	boolean	Flag that disables the input element
maxLength	✔️	number	Indicates the maximum number of characters a user can enter
autoFocus	✔️	boolean	Flag to automatically focus the input element on mount
tagName	✔️	string	HTML tag for the editable element (default: "div")
multiLine	✔️	boolean	Allow multi-line input (default: true). Set to false for single-line
sanitize	✔️	(content: string) => string	Callback to sanitize content before onChange fires
updatedContent	✔️	string	Text injected from parent element into the input as the current value
onContentExternalUpdate	✔️	(content) => void	Method that emits the injected content by the updatedContent prop
onChange	✔️	(content, meta?) => void	Emits current content and optional { caretPosition } metadata
onKeyUp	✔️	(e) => void	Method that emits the keyUp keyboard event
onKeyDown	✔️	(e) => void	Method that emits the keyDown keyboard event
onFocus	✔️	(e) => void	Method that emits the focus event
onBlur	✔️	(e) => void	Method that emits the blur event
onPaste	✔️	(e) => void	Method that emits the paste event

The component also accepts any standard HTML attribute (id, data-*, tabIndex, spellCheck, style, className, etc.) which will be forwarded to the editable element.

Types

The package exports the following TypeScript types:

import type { ContentEditableHandle, ContentEditableProps } from "react-basic-contenteditable"

Keyboard shortcuts

• Undo: Ctrl + Z (Windows/Linux) / Cmd + Z (macOS)
• Redo: Ctrl + Y / Ctrl + Shift + Z (Windows/Linux) / Cmd + Shift + Z (macOS)

Contribution

If you have a suggestion that would make this component better feel free to fork the project and open a pull request or create an issue for any idea or bug you find.
Remeber to follow the Contributing Guidelines.

Licence

React Basic Contenteditable is MIT licensed.