Highlight

The Highlight component highlights substrings of text based on a search query. It's useful for search results, filtering, and drawing attention to specific text patterns.

Import

import { Highlight } from '@oztix/roadie-components'
// For advanced use cases, you can also import the hook and types:
import {
  HighlightChunk,
  UseHighlightProps,
  useHighlight
} from '@oztix/roadie-components/Highlight'

Examples

Basic usage

Highlight specific text based on a query:

<View gap='200'>
  <Text>
    <Highlight
      text='The quick brown fox jumps over the lazy dog'
      query='quick'
    />
  </Text>
  <Text>
    <Highlight
      text='The quick brown fox jumps over the lazy dog'
      query='fox'
    />
  </Text>
  <Text>
    <Highlight
      text='The quick brown fox jumps over the lazy dog'
      query='lazy dog'
    />
  </Text>
</View>

Multiple queries

Highlight multiple different terms:

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

Case sensitivity

By default, matching is case-insensitive. You can make it case-sensitive:

<View gap='200'>
  <View gap='100'>
    <Text textStyle='ui.meta'>Case insensitive (default)</Text>
    <Text>
      <Highlight
        text='Hello World'
        query='hello'
      />
    </Text>
  </View>
  <View gap='100'>
    <Text textStyle='ui.meta'>Case sensitive</Text>
    <Text>
      <Highlight
        text='Hello World'
        query='hello'
        ignoreCase={false}
      />
    </Text>
  </View>
</View>

Match all occurrences

By default, all matches are highlighted. You can disable this:

<View gap='200'>
  <View gap='100'>
    <Text textStyle='ui.meta'>Match all (default)</Text>
    <Text>
      <Highlight
        text='foo bar foo baz foo'
        query='foo'
        matchAll={true}
      />
    </Text>
  </View>
  <View gap='100'>
    <Text textStyle='ui.meta'>Match first only</Text>
    <Text>
      <Highlight
        text='foo bar foo baz foo'
        query='foo'
        matchAll={false}
      />
    </Text>
  </View>
</View>

Exact match

Match whole words only:

<View gap='200'>
  <View gap='100'>
    <Text textStyle='ui.meta'>Partial match (default)</Text>
    <Text>
      <Highlight
        text='foo foobar barfoo'
        query='foo'
      />
    </Text>
  </View>
  <View gap='100'>
    <Text textStyle='ui.meta'>Exact match</Text>
    <Text>
      <Highlight
        text='foo foobar barfoo'
        query='foo'
        exactMatch={true}
      />
    </Text>
  </View>
</View>

Color palettes

Customize the highlight color using color palettes. Information is the default.

<View gap='200'>
  <Text>
    <Highlight
      text='This text uses the neutral palette'
      query='neutral'
      colorPalette='neutral'
    />
  </Text>
  <Text>
    <Highlight
      text='This text uses the accent palette'
      query='accent'
      colorPalette='accent'
    />
  </Text>
  <Text>
    <Highlight
      text='This text uses the brand palette'
      query='brand'
      colorPalette='brand'
    />
  </Text>
  <Text>
    <Highlight
      text='This text uses the brand secondary palette'
      query='brand secondary'
      colorPalette='brandSecondary'
    />
  </Text>
  <Text>
    <Highlight
      text='This text uses the information palette'
      query='information'
      colorPalette='information'
    />
  </Text>
  <Text>
    <Highlight
      text='This text uses the success palette'
      query='success'
      colorPalette='success'
    />
  </Text>
  <Text>
    <Highlight
      text='This text uses the warning palette'
      query='warning'
      colorPalette='warning'
    />
  </Text>
  <Text>
    <Highlight
      text='This text uses the danger palette'
      query='danger'
      colorPalette='danger'
    />
  </Text>
</View>

In headings

Highlight works great in headings for creating eye-catching titles:

<View gap='200' textAlign='center'>
  <Heading as='h1' textStyle='display.prose.2'>
    <Highlight
      text='Great events need great partners'
      query='great'
      colorPalette='accent'
    />
  </Heading>
  <Heading as='h2' color='neutral.fg.subtle' textStyle='display.prose.4'>
    <Highlight
      text='Not just great ticketing software. Why?'
      query='great'
      backgroundColor='orange.5'
    />
  </Heading>
</View>

Search results example

A practical example of highlighting search results:

(() => {
  const results = [
    'JavaScript is a programming language',
    'TypeScript is a typed superset of JavaScript',
    'React is a JavaScript library for building user interfaces'
  ]
  const searchTerm = 'JavaScript'

  return (
    <View gap='300'>
      <View gap='100'>
        <Heading as='h3' textStyle='display.ui.4'>
          Search results for "{searchTerm}"
        </Heading>
        <Text textStyle='ui.meta'>{results.length} results found</Text>
      </View>
      <View gap='100'>
        {results.map((result, index) => (
          <Text key={index}>
            <Highlight text={result} query={searchTerm} colorPalette='accent' />
          </Text>
        ))}
      </View>
    </View>
  )
})()