Skip to main content

Quick start

Install​

pnpm add one-more-highlight

Highlight all matches​

import { Highlight } from 'one-more-highlight';

<Highlight
  text="hello world hello"
  searchWords={['hello']}
  highlightClassName="my-highlight"
/>
// → <mark class="my-highlight">hello</mark> world <mark class="my-highlight">hello</mark>

Add multi-state styling​

import { Highlight } from 'one-more-highlight';

<Highlight
  text="hello world hello"
  searchWords={['hello']}
  highlightClassName="hl-base"
  states={[
    { name: 'active', index: 0, className: 'hl-active' },
  ]}
/>
// Match 0 gets both "hl-base" and "hl-active".
// Match 1 gets only "hl-base".

Continue to the Guides for live demos and detailed walkthroughs.