highlight-search-text

Responsive component for highlighting text by keywords for React. May be useful for searching.

In this Demo you may get familiar with how the component works.

Installation

react version >= 16.8

npm install highlight-search-text --save

Import

import HighlightText from 'highlight-search-text';

Usage

<HighlightText
  search={search}
  text={text}
  highlightClassName="highlight"
  containerClassName="container"
  className="other"
  caseIgnore
  spaceIgnore
  startWord
  endWord
  fullWord
  all
/>

How it works

<HighlightText
  text="Once Upon A Time, In A Galaxy Far..."
  search="on"
  highlightClassName="highlight"
  containerClassName="container"
  className="other"
  caseIgnore
  all
>

<span class="container">
  <span class="highlight">On</span>
  <span class="other">ce Up</span>
  <span class="highlight">on</span>
  <span class="other"> A Time, In A Galaxy Far...</span>
</span>

Attributes

Attributes	Type	Default	Description
search	string	''	It’s what we are looking for
text	string	''	It’s where we are looking for
highlightClassName	string	''	It’s the class of highlighted elements
containerClassName	string	''	It’s the class of main container
className	string	''	It's the class of other elements
caseIgnore	boolean	false	This option allows to search any piece of text ignoring its case-sensitivity(Uppercase/Lowercase).
spaceIgnore	boolean	false	This option allows to search any piece of text ignoring leading and trailing spaces.
startWord	boolean	false	This option allows to search any piece of text starting with the entered word exactly.
endWord	boolean	false	This option allows to search any piece of text ending with the entered word exactly.
fullWord	boolean	false	This option allows to search the whole word within the text. It brings only the very first match.
all	boolean	false	This option allows to search the whole word with all its matches within the text.