react-text-highlighting

react-text-highlighting

react component to highlight text

Quick Start

npm install react-text-highlighting --save

<TextHighlighting highlightCharsRanges={[{start: 0, end: 5}]}>
  hello world
<TextHighlighting>

<TextHighlighting highlightChars={[0, 2, 4]}>
  hello world
<TextHighlighting>

<TextHighlighting highlight='world'>
  hello world
<TextHighlighting>

You can customize the styling by passing a style object

const STYLES = {
  highlight: {backgroundColor: 'yellow'},
  range: {
    start:   {backgroundColor: 'yellow'},
    between: {backgroundColor: 'yellow'},
    end:     {backgroundColor: 'yellow'}
  }
};

<TextHighlighting styles={STYLES} highlight='world'>
  hello world
<TextHighlighting>