Highlight

Query-based substring highlighting using Mark.

Import

import { Highlight } from '@oztix/roadie-components'

Examples

Default

<p>
  <Highlight
    text='The quick brown fox jumps over the lazy dog'
    query='quick'
  />
</p>
View code

Intents

The default intent is info.

<div className='grid gap-2'>
  <p>
    <Highlight text='Neutral intent highlight' query='Neutral' intent='neutral' />
  </p>
  <p>
    <Highlight text='Accent intent highlight' query='Accent' intent='accent' />
  </p>
  <p>
    <Highlight text='Brand intent highlight' query='Brand' intent='brand' />
  </p>
  <p>
    <Highlight text='Info intent highlight' query='Info' intent='info' />
  </p>
  <p>
    <Highlight text='Success intent highlight' query='Success' intent='success' />
  </p>
  <p>
    <Highlight text='Warning intent highlight' query='Warning' intent='warning' />
  </p>
  <p>
    <Highlight text='Danger intent highlight' query='Danger' intent='danger' />
  </p>
</div>
View code

With multiple queries

<p>
  <Highlight
    text='React, Vue, and Svelte are popular JavaScript frameworks'
    query={['React', 'Vue', 'Svelte']}
  />
</p>
View code

With case sensitivity

By default, matching is case-insensitive.

<div className='grid gap-2'>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Case insensitive (default)</p>
    <p>
      <Highlight text='Hello World' query='hello' />
    </p>
  </div>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Case sensitive</p>
    <p>
      <Highlight text='Hello World' query='hello' ignoreCase={false} />
    </p>
  </div>
</div>
View code

With match first only

By default, all occurrences are highlighted.

<div className='grid gap-2'>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Match all (default)</p>
    <p>
      <Highlight text='foo bar foo baz foo' query='foo' matchAll={true} />
    </p>
  </div>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Match first only</p>
    <p>
      <Highlight text='foo bar foo baz foo' query='foo' matchAll={false} />
    </p>
  </div>
</div>
View code