Highlight

Highlight allows you to highlight substrings of a text.

Import#

import { Highlight } from '@chakra-ui/react'

Usage#

Render the main string as children of the Highlight component, then pass the word(s) you want to highlight to the query prop. Use the style prop to define the styles for the highlighted parts.

Highlight a word#

<Highlight query='spotlight' styles={{ px: '1', py: '1', bg: 'orange.100' }}>
  With the Highlight component, you can spotlight words.
</Highlight>

Usage with Heading#

The Highlight component can be used within any of the typography components. Here's an example of how to use it within Heading

<Heading lineHeight='tall'>
  <Highlight
    query='spotlight'
    styles={{ px: '2', py: '1', rounded: 'full', bg: 'red.100' }}
  >
    With the Highlight component, you can spotlight words.
  </Highlight>
</Heading>

Highlight with multiple words#

To highlight multiple phrases that have the same style, pass the substrings you want to highlight as an array to the query prop

<Heading lineHeight='tall'>
  <Highlight
    query={['spotlight', 'emphasize', 'Accentuate']}
    styles={{ px: '2', py: '1', rounded: 'full', bg: 'teal.100' }}
  >
    With the Highlight component, you can spotlight, emphasize and accentuate
    words.
  </Highlight>
</Heading>

The query for the strings is case insensitive. Notice "Accentuate" in the query.

Highlight substrings#

The Highlight component allows you to highlight substrings of a word. A good use case for this is in a search query.

<Box>
  <Text>Search result for: "spot"</Text>
  <Text mt='6' fontWeight='bold'>
    <Highlight query='spot' styles={{ py: '1', fontWeight: 'normal' }}>
      Spotlight bulb
    </Highlight>
  </Text>
  <Text fontWeight='bold'>
    <Highlight query='spot' styles={{ py: '1', fontWeight: 'normal' }}>
      Spot cleaner
    </Highlight>
  </Text>
  <Text fontWeight='bold'>
    <Highlight query='spot' styles={{ py: '1', fontWeight: 'normal' }}>
      Spot ceiling
    </Highlight>
  </Text>
</Box>

Customizing rendered elements#

In cases where you want to customize multiple rendered elements and their styles, use the useHighlight hook.

import { useHighlight } from '@chakra-ui/react'

// prettier-ignore
() => {
  const chunks = useHighlight({
    text: 'With the Highlight component, you can spotlight, emphasize and accentuate words instantly',
    query: ['spotlight', 'emphasize', 'accentuate', 'instantly']
  })

  return (
    <Heading lineHeight="tall">
      {chunks.map(({ match, text }) => {
        if (!match) return text
        return text === 'instantly' ? (
          <Box as='u' fontFamily='NewYork'>
            {text}
          </Box>
        ) : (
          <Mark bg='black' color="white"  fontFamily='NewYork' px='2' py='1'>
            {text}
          </Mark>
        )
      })}
    </Heading>
  )
}

Edit this page on GitHub