Highlight

Highlight splits text into matching and non-matching chunks and renders every match with a mark element. It is useful for search results, command palettes, and filtered lists.

Import

<script setup lang="ts">
import { Highlight, useHighlight } from '@destyler-ui/vue'
</script>

import { Highlight, useHighlight } from '@destyler-ui/react'

import { Highlight, useHighlight } from '@destyler-ui/solid'

<script lang="ts">
  import { Highlight, useHighlight } from '@destyler-ui/svelte/highlight'
</script>

Basic usage

<script setup lang="ts">
import { Highlight } from '@destyler-ui/vue'
</script>

<template>
  <Highlight query="accessible" text="Build accessible components with Vue." ignore-case match-all />
</template>

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

export function Example() {
  return <Highlight query="accessible" text="Build accessible components with React." ignoreCase matchAll />
}

import { Highlight } from '@destyler-ui/solid'

export function Example() {
  return <Highlight query="accessible" text="Build accessible components with Solid." ignoreCase matchAll />
}

<script lang="ts">
  import { Highlight } from '@destyler-ui/svelte/highlight'
</script>

<Highlight
  query={['svelte', 'accessible']}
  text="Build accessible components with Svelte."
  ignoreCase
  matchAll
/>

Normal mark attributes are forwarded to each matching element.

API

Highlight

Prop	Type	Default	Description
text	string	Required	Complete text to render.
query	string | string[]	Required	One or more values to highlight.
ignoreCase	boolean	false	Matches without comparing letter case.
matchAll	boolean	false for a string; true for an array	Highlights every occurrence instead of only the first. Multiple queries require this behavior.

useHighlight

useHighlight returns { text, match } chunks. Vue returns a computed ref, React returns the array, and Solid/Svelte return accessors.

<script setup lang="ts">
import { useHighlight } from '@destyler-ui/vue'

const chunks = useHighlight({ text: 'Vue search result', query: 'search' })
</script>

<template>
  <span v-for="(chunk, index) in chunks" :key="index" :class="{ match: chunk.match }">
    {{ chunk.text }}
  </span>
</template>

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

export function Result() {
  const chunks = useHighlight({ text: 'React search result', query: 'search' })
  return chunks.map((chunk, index) => <span key={index} className={chunk.match ? 'match' : undefined}>{chunk.text}</span>)
}

import { useHighlight } from '@destyler-ui/solid'
import { For } from 'solid-js'

export function Result() {
  const chunks = useHighlight({ text: 'Solid search result', query: 'search' })
  return <For each={chunks()}>{chunk => <span class={chunk.match ? 'match' : undefined}>{chunk.text}</span>}</For>
}

<script lang="ts">
  import { useHighlight } from '@destyler-ui/svelte/highlight'

  const chunks = useHighlight(() => ({ text: 'Svelte search result', query: 'search' }))
</script>

{#each chunks() as chunk}
  <span class:match={chunk.match}>{chunk.text}</span>
{/each}