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