Highlight

Highlight allows you to highlight substrings of a text.

View source@chakra-ui/layout

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>
  )
}

Props

queryrequired

Type

string | string[]

styles

Type

SystemStyleObject