@zekro/react-highlight

react-highlight

This library adds a component to highlight keyword occurrences in text.

Usage

npm install --save @zekro/react-highlight

This is a simple example using the Highlight component.

App.tsx

import React from 'react';
import { Highlight, Provider } from '@zekro/react-highlight';

export const App: React.FC = () => {
  return (
    <div>
      <Highlight
        content="Hey, this is a demo!"
        keywords={['demo', 'hey']}
      ></Highlight>
    </div>
  );
};

If you want to propagate keywords into multiple sub-components containing Highlight components, you can use the Provider component to do so.

App.tsx

import React from 'react';
import { Highlight, Provider } from '@zekro/react-highlight';

export const App: React.FC = () => {
  return (
    <div>
      <Provider
        keywords={['demo', 'hey', 'strong']}
        highlightClassName="my-highlight-class"
      >
        <Highlight content="Hey, this is a demo!"></Highlight>
        <br />
        <strong>
          <Highlight content="And this is some strong content!"></Highlight>
        </strong>
      </Provider>
    </div>
  );
};

Storybook

You can also try around yourself with the components using the provided storybook. Just clone the repository, install the dependencies and start the storybook.

$ git clone https://github.com/zekroTJA/react-highlight.git .
$ npm install
$ npm start