@types/react-highlight-words

What is @types/react-highlight-words?

@types/react-highlight-words provides TypeScript definitions for the react-highlight-words package, which is a React component for highlighting words within a larger body of text.

What are @types/react-highlight-words's main functionalities?

Basic Highlighting

This feature allows you to highlight specific words within a larger body of text. The `searchWords` array contains the words to be highlighted, and `textToHighlight` is the text where the words will be highlighted.

import Highlighter from 'react-highlight-words';

const text = 'The quick brown fox jumps over the lazy dog';
const searchWords = ['quick', 'fox', 'lazy'];

<Highlighter
  highlightClassName="YourHighlightClass"
  searchWords={searchWords}
  autoEscape={true}
  textToHighlight={text}
/>;

Custom Highlighting Styles

This feature allows you to apply custom styles to the highlighted words. The `highlightStyle` prop is used to define the CSS styles for the highlighted words.

import Highlighter from 'react-highlight-words';

const text = 'The quick brown fox jumps over the lazy dog';
const searchWords = ['quick', 'fox', 'lazy'];

<Highlighter
  highlightStyle={{ backgroundColor: 'yellow', fontWeight: 'bold' }}
  searchWords={searchWords}
  autoEscape={true}
  textToHighlight={text}
/>;

Case Insensitive Highlighting

This feature allows you to perform case-insensitive highlighting. By setting the `caseSensitive` prop to `false`, the component will highlight words regardless of their case.

import Highlighter from 'react-highlight-words';

const text = 'The quick brown fox jumps over the lazy dog';
const searchWords = ['Quick', 'FOX', 'lazy'];

<Highlighter
  highlightClassName="YourHighlightClass"
  searchWords={searchWords}
  autoEscape={true}
  caseSensitive={false}
  textToHighlight={text}
/>;

Other packages similar to @types/react-highlight-words

react-text-highlighter

react-text-highlighter is another React component for highlighting text. It offers similar functionality to react-highlight-words but with a different API. It allows for more customization options and supports nested highlights.

react-string-replace

react-string-replace is a utility for safely replacing substrings in a string with React components. While it is not specifically designed for highlighting, it can be used to achieve similar results by replacing words with styled components.

react-markdown

react-markdown is a React component for rendering Markdown. It supports custom renderers, which can be used to highlight specific words or phrases within the Markdown content. It is more versatile but requires more setup for highlighting specific words.

README

Installation

npm install --save @types/react-highlight-words

Summary

This package contains type definitions for react-highlight-words (https://github.com/bvaughn/react-highlight-words#readme).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-highlight-words.

Additional Details

• Last updated: Wed, 29 May 2024 17:07:22 GMT
• Dependencies: @types/react

Credits

These definitions were written by Mohamed Hegazy, and Kelly Milligan.