React Text Highlight

A powerful, flexible, and easy-to-use React component for highlighting text. Perfect for search features, documentation sites, and content management systems.

Demo | NPM | GitHub

Video Demo

See React Text Highlight in action:

Can't see the video? Click here to watch the demo or visit the live demo site

Features

• Multiple search terms - Highlight multiple words at once
• Case-sensitive matching - Optional case-sensitive search
• Exact word matching - Match whole words only
• Custom styling - Full control over highlight appearance
• Click handlers - Interact with highlighted text
• Tooltips - Built-in tooltip support
• TypeScript ready - Full type definitions included
• Zero config - Works out of the box with sensible defaults
• Lightweight - Minimal dependencies
• React 18 & 19 - Compatible with latest React versions

Installation

npm install @hazembraiek/react-text-highlight

yarn add @hazembraiek/react-text-highlight

pnpm add @hazembraiek/react-text-highlight

Quick Start

import { TextHighlight } from "@hazembraiek/react-text-highlight";

function App() {
  return (
    <TextHighlight
      text="React Text Highlight makes it easy to highlight text in your applications"
      highlightWords={["React", "highlight", "text"]}
    />
  );
}

Basic Examples

Simple Highlighting

<TextHighlight
  text="The quick brown fox jumps over the lazy dog"
  highlightWords={["quick", "fox", "lazy"]}
/>

Case-Sensitive Search

<TextHighlight
  text="React is awesome. react makes development easy."
  highlightWords={["React"]}
  caseSensitive={true}
/>

Exact Word Matching

<TextHighlight
  text="This is a test. Testing is important."
  highlightWords={["test"]}
  exactWord={true}
  // Will match "test" but not "Testing"
/>

Custom Styling

<TextHighlight
  text="Highlight this text with custom colors"
  highlightWords={["Highlight", "custom"]}
  highlightStyle={{
    backgroundColor: "#ffeb3b",
    color: "#000",
    fontWeight: "bold",
    padding: "2px 4px",
    borderRadius: "3px",
  }}
/>

With Click Handler

<TextHighlight
  text="Click on any highlighted word"
  highlightWords={["Click", "highlighted", "word"]}
  onHighlightClick={(e, word, index) => {
    console.log(`Clicked: ${word} at index ${index}`);
  }}
/>

Track Match Count

function SearchComponent() {
  const [matchCount, setMatchCount] = useState(0);

  return (
    <div>
      <p>Found {matchCount} matches</p>
      <TextHighlight
        text="Search text to find matches in this text"
        highlightWords={["text", "matches"]}
        onHighlightCountChange={setMatchCount}
      />
    </div>
  );
}

API Reference

Props

Required Props

| Prop | Type | Description | | ---------------- | ---------- | --------------------------------------------- | | text | string | The text content to display and search within | | highlightWords | string[] | Array of words/phrases to highlight |

Optional Props

| Prop | Type | Default | Description | | --------------- | ---------- | ------- | ----------------------------------------------- | | caseSensitive | boolean | false | Enable case-sensitive matching | | exactWord | boolean | false | Match whole words only (word boundaries) | | autoEscape | boolean | true | Escape special regex characters in search terms | | sanitize | boolean | true | Sanitize HTML in text content | | ignoreWords | string[] | [] | Words to exclude from highlighting |

Styling Props

| Prop | Type | Default | Description | | ---------------------- | -------------------- | --------------------------------------------------- | ------------------------------------------- | | highlightStyle | CSSProperties | { backgroundColor: 'yellow', fontWeight: 'bold' } | Inline styles for highlighted text | | highlightClassName | string | '' | CSS class for highlighted text | | highlightTag | string \| function | 'mark' | HTML tag or custom component for highlights | | unhighlightStyle | CSSProperties | {} | Inline styles for non-highlighted text | | unhighlightClassName | string | '' | CSS class for non-highlighted text | | unhighlightTag | string \| function | 'span' | HTML tag for non-highlighted text | | className | string | '' | CSS class for wrapper element | | style | CSSProperties | {} | Inline styles for wrapper element | | wrapperTag | string | 'div' | HTML tag for wrapper element |

Advanced Props

| Prop | Type | Default | Description | | -------------------------- | --------- | ------------------------------- | ---------------------------------------- | | ellipsis | boolean | false | Enable text ellipsis for overflow | | enableAutoScroll | boolean | true | Auto-scroll to active highlight | | activeHighlightClassName | string | 'react-text-highlight-active' | CSS class for currently active highlight |

Callback Props

| Prop | Type | Description | | -------------------------- | ------------------------------ | ---------------------------------------------- | | onHighlightClick | (event, word, index) => void | Called when a highlighted word is clicked | | onHighlightCountChange | (count) => void | Called when the number of matches changes | | onCurrentHighlightChange | (index) => void | Called when the active highlight index changes |

Tooltip Props

| Prop | Type | Description | | ----------------- | --------------------- | ------------------------------- | | tooltip | object | Tooltip configuration object | | tooltip.enabled | boolean | Enable/disable tooltips | | tooltip.content | (text) => ReactNode | Custom tooltip content renderer |

Ref Methods

Access component methods using a ref:

import { useRef } from "react";
import { TextHighlight } from "@hazembraiek/react-text-highlight";

function MyComponent() {
  const highlightRef = useRef(null);

  const goToNext = () => {
    highlightRef.current?.next();
  };

  const goToPrevious = () => {
    highlightRef.current?.previous();
  };

  return (
    <div>
      <button onClick={goToPrevious}>Previous</button>
      <button onClick={goToNext}>Next</button>
      <TextHighlight
        ref={highlightRef}
        text="Navigate through highlighted words"
        highlightWords={["Navigate", "highlighted", "words"]}
      />
    </div>
  );
}

Available Ref Methods

• next() - Navigate to next highlighted word
• previous() - Navigate to previous highlighted word

Advanced Usage

Custom Highlight Component

<TextHighlight
  text="Custom component for each highlight"
  highlightWords={["Custom", "highlight"]}
  highlightTag={(word, index, props) => (
    <strong
      {...props}
      style={{ ...props.style, color: "blue" }}
      data-index={index}
    >
      {word}
    </strong>
  )}
/>

With Tooltips

<TextHighlight
  text="Hover over highlighted words to see tooltips"
  highlightWords={["Hover", "highlighted", "tooltips"]}
  tooltip={{
    enabled: true,
    content: (text) => `You clicked: ${text}`,
  }}
/>

Ignore Specific Words

<TextHighlight
  text="Highlight all words except the ignored ones"
  highlightWords={["all", "words", "the", "ones"]}
  ignoreWords={["the"]}
  // Will highlight "all", "words", "ones" but not "the"
/>

Multiple Styling Classes

// In your CSS
.custom-highlight {
  background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

// In your component
<TextHighlight
  text="Beautiful gradient highlights"
  highlightWords={['Beautiful', 'gradient', 'highlights']}
  highlightClassName="custom-highlight"
/>

Real-World Search Example

function SearchableContent() {
  const [searchTerm, setSearchTerm] = useState("");
  const [matchCount, setMatchCount] = useState(0);

  const content = `
    React is a JavaScript library for building user interfaces.
    It makes creating interactive UIs painless.
    Design simple views for each state in your application.
  `;

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <p>{matchCount} matches found</p>
      <TextHighlight
        text={content}
        highlightWords={searchTerm.split(" ").filter(Boolean)}
        onHighlightCountChange={setMatchCount}
        highlightStyle={{
          backgroundColor: "#ffeb3b",
          padding: "2px 4px",
          borderRadius: "3px",
        }}
      />
    </div>
  );
}

TypeScript

The package includes full TypeScript definitions. Import types as needed:

import {
  TextHighlight,
  TextHighlightProps,
  TextHighlightRef,
} from "@hazembraiek/react-text-highlight";

const MyComponent: React.FC = () => {
  const ref = useRef<TextHighlightRef>(null);

  const props: TextHighlightProps = {
    text: "TypeScript support included",
    highlightWords: ["TypeScript", "support"],
  };

  return <TextHighlight {...props} ref={ref} />;
};

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• React 18+
• React 19+

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Hazem Braiek

Links

• Live Demo
• NPM Package
• GitHub Repository
• Issue Tracker

Support

If you find this package helpful, please consider:

• Starring the GitHub repository
• Reporting issues on GitHub
• Contributing to the project

Made with ❤️ by Hazem Braiek