Highlight

A component for highlighting text within a string.

Usage

<script>
  import {Highlight} from 'ui-ingredients';

  let text =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate sapiente consequatur, eos explicabo architecto exercitationem? Consequuntur repellat laboriosam ullam adipisci?';
</script>

<Highlight {text} query="consectetur" />

API Reference

Root

Prop	Default	Description
`ignoreCase`		`boolean` Whether to ignore case while matching
`matchAll`		`boolean` Whether to match multiple instances of the query
`query`		`string \| string[]` The query to highlight in the text
`text`		`string` The text to highlight