Highlight

View Source

Pico Das Robot

render(() => <Highlight query="Pico" text="Pico Das Robot" />)

render(() => <Highlight query="Pico" text="Pico Das Robot" />)

Robots rule the world

render(() => (
  <Highlight query="o" text="Robots rule the world" marker={Highlight.FUZZY} />
))

render(() => (
  <Highlight query="o" text="Robots rule the world" marker={Highlight.FUZZY} />
))

Props

Themeable

Accepts Text props.

Use the highlight key in ThemeProvider to customize the default properties of this component.

colorstring

Color of the highlighted text

(
  text: string,
  query: string
) => Array<{ highlight: boolean; text: string }>

The algorithm used to mark the text, defaults to STARTS_WITH

querystring

The query to search for matches

textstring

The full string of text to be displayed