A flexible and customizable React component that provides a content-editable <div>
for user input, ideal for autocomplete and rich text scenarios.
- 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.
Install the dependencies:
pnpm install
Build the library:
pnpm build
Build the library in watch mode:
pnpm dev