react-multi-highlight

react component to highlight multiple words in text according to each config

Usage

try example in Code Sandbox:

basic usage:

import Highlighter from 'react-multi-highlight';

export default () => (
  <Highlighter
    config={[
      {
        word: 'and',
        className: 'a',
        style: {
          color: 'blue',
        },
      },
      {
        word: 'nd light-off tim',
        className: 'c',
        style: {
          textDecoration: 'underline',
          textDecorationColor: 'green',
        },
      },
    ]}
    highlightTag="span"
    normalTag="span"
    text="Life, thin and light-off time and time again"
  />
);

Props

| Property | Type | Required? | Description | | --------------- | ----------------------------------- | :-------: | ------------------------------------------------------------------------------------ | | text | string | ✓ | text string will be highlight | | config | IHighlightConfig[] IHighlightConfig | ✓ | config or config array, match word in text to be highlight or ranges to be highlight | | highlightTag | keyof HTMLElementTagNameMap | | html element tag to wrap highlighted text | | normalTag | keyof HTMLElementTagNameMap | | html element tag to wrap normal text | | caseSensitive | boolean | | word match is case sensitive, default true |

IHighlightConfig

| Property | Type | Required? | Description | | ----------- | ------------------------------ | :-------: | ----------------------------------------------------------------------------- | | word | string | | word to generate a regex, then match to highlight | | className | string | | className of the highlight tag | | style | string | | style of the highlight tag | | ranges | [start: number, end: number][] | | ranges in text will be highlight, only effective without word configuration |

Development

# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm start

# build library source code
$ pnpm run build

# build library source code in watch mode
$ pnpm run build:watch

# build docs
$ pnpm run docs:build

# check your project for potential problems
$ pnpm run doctor

LICENSE

MIT