react-highlight-words

A component that can highlight words in the text with custom styles. It is a lightweight wrapper based on react-text-matcher.

If you want more customization capabilities, please use react-text-matcher.

Install

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

Usage

Single word

import Highlightwords from '@shhhplus/react-highlight-words';

const Demo = () => {
  return (
    <Highlightwords words="nice" style={{ color: 'green' }}>
      The weather is nice today.
    </Highlightwords>
  );
};

Multi words

import Highlightwords from '@shhhplus/react-highlight-words';

const Demo = () => {
  return (
    <Highlightwords
      words={['weather', new RegExp('nice')]}
      style={{ color: 'green' }}
    >
      The weather is nice today.
    </Highlightwords>
  );
};

Use global style

import Highlightwords from '@shhhplus/react-highlight-words';

HighlightWords.config({ color: 'green' });

const Demo = () => {
  return (
    <>
      <Highlightwords words="birthday">
        Welcome to come my birthday party.
      </Highlightwords>
      <Highlightwords words="nice">
        The weather is so nice today.
      </Highlightwords>
    </>
  );
};