React Text Maker

A React component for text highlighting and annotation with customizable themes and interactive features.

Try It Out

Basic Usage

import { ReactTextMaker } from 'react-text-maker';

function App() {
  return (
    <ReactTextMaker
      text="Select this text to create a highlight annotation."
      hint="Important"
    />
  );
}

Features

• 🎨 Customizable highlight colors and themes
• 🖱️ Interactive text selection and highlighting
• ⌨️ Keyboard shortcuts support (Delete/Backspace to remove highlights)
• 🎯 Multiple highlight support with nested annotations
• 🔍 Customizable hint text display
• 🎭 Theme-based highlighting system
• ⚡ Real-time highlight updates
• 🧪 Comprehensive test coverage

Installation

# Using npm
npm install react-text-maker

# Using yarn
yarn add react-text-maker

# Using pnpm
pnpm add react-text-maker

Documentation Navigation

• Installation Guide - Learn how to install and configure
• API Documentation - View detailed API documentation
• Examples - Browse more usage examples