react-hightlight-text

Highlight a keyword in a piece of text and return a React element.

Installation

npm i react-highlight-element

Basic Usage

import React from 'react';
import HighlightText from 'react-highlight-element';

export default function Demo() {
  return (
    <HighlightText text="This is react component" highlight="react" />
  );
}

import React, { useState, Fragment } from 'react';
import HighlightText from 'react-highlight-element';

export default function Demo() {
  const [value, setValue] = useState('react');
  return (
    <Fragment>
      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
      <HighlightText text="This is react component" highlight={value} />
    </Fragment>
  );
}

Color

import React, { useState, Fragment } from 'react';
import HighlightText from 'react-highlight-element';

export default function Demo() {
  const [value, setValue] = useState('react');
  return (
    <Fragment>
      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
      <HighlightText text="This is react component" highlight={value} color="red" />
    </Fragment>
  );
}

Background Color

import React, { useState, Fragment } from 'react';
import HighlightText from 'react-highlight-element';

export default function Demo() {
  const [value, setValue] = useState('react');
  return (
    <Fragment>
      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
      <HighlightText text="This is react component" highlight={value} backgroundColor="white" />
    </Fragment>
  );
}

API

export interface HighlightTextI {
    text: string,
    highlight: string,
    color?: string,
    backgroundColor?: string
}

License

Licensed under the MIT License.