Skip to content

a React component for streamlining user input in a `contenteditable` HTML <div> with seamless and customizable autocomplete

Notifications You must be signed in to change notification settings

daqichen/react-contenteditable-autocomplete

Repository files navigation

React ContentEditable Autocomplete

A flexible and customizable React component that provides a content-editable <div> for user input, ideal for autocomplete and rich text scenarios.

Features

  • Content-editable input: Users can type and edit text directly.
  • Placeholder support: Displays placeholder text when empty.
  • Focus and input handling: Manages focus state and input events for a smooth user experience.
  • Ref-based content management: Uses React refs to control and access the editable content.
  • Parent communication: Notifies parent components of input changes.
  • Customizable styles: Accepts custom class names and inline styles; adapts to light/dark themes.
  • Autocomplete ready: Designed for use with suggestion/autocomplete lists.
  • TypeScript support: Fully typed props and state for safety and clarity.
  • Accessibility: Keyboard and screen reader friendly.
  • Performance optimized: Handles large text efficiently.
  • Tested and reliable: Works across major browsers and devices.
  • Reusable and extendable: Easily integrated and extended for various use cases.
  • Minimal dependencies: Lightweight and easy to add to any project.
  • Responsive: Adapts to different screen sizes and orientations.
  • Integration friendly: Works with state management libraries (e.g., Redux, MobX) and build tools (Webpack, Parcel).
  • Supports controlled/uncontrolled usage: Flexible for different form management strategies.
  • Rich text ready: Can be extended to support rich text formats.
  • Well-documented: Includes clear comments, usage examples, and API references.
  • Internationalization: Easily localized for multiple languages.
  • Versioned and maintainable: Structured for easy updates and long-term maintenance.

Setup

Install the dependencies:

pnpm install

Get started

Build the library:

pnpm build

Build the library in watch mode:

pnpm dev

About

a React component for streamlining user input in a `contenteditable` HTML <div> with seamless and customizable autocomplete

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published