Highlight

Highlightは、テキスト内の指定された文字列をハイライトするコンポーネントです。デフォルトでは、p要素をレンダリングします。

わかんないよ…。わっかんないよ！ジュー君の言ってることはひとつもわかんないよ！ジュー君がいいって言ってるもの、何がいいのかわかんないよ！わかんない！私にはわかんないの！ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！

<Highlight query="わかんない" colorScheme="warning">
  わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！
  ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
  わかんない！私にはわかんないの！
  ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
  狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
</Highlight>

使い方

import { Highlight } from "@yamada-ui/react"

import { Highlight } from "@/components/ui"

import { Highlight } from "@workspaces/ui"

<Highlight />

バリアントを変更する

<VStack>
  <For each={["subtle", "solid", "text", "accent"]}>
    {(variant, index) => (
      <Highlight
        key={index}
        query="わかんない"
        colorScheme="warning"
        markProps={{ variant }}
      >
        わかんないよ…。わっかんないよ！
        ジュー君の言ってることはひとつもわかんないよ！
        ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
        わかんない！私にはわかんないの！
        ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
        狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
      </Highlight>
    )}
  </For>
</VStack>

カラースキームを変更する

<VStack>
  <For each={["warning", "success"]}>
    {(colorScheme, index) => (
      <Highlight key={index} query="わかんない" colorScheme={colorScheme}>
        わかんないよ…。わっかんないよ！
        ジュー君の言ってることはひとつもわかんないよ！
        ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
        わかんない！私にはわかんないの！
        ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
        狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
      </Highlight>
    )}
  </For>
</VStack>

複数指定する

<Highlight query={["わかんない", "ジュー君"]} colorScheme="warning">
  わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！
  ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
  わかんない！私にはわかんないの！
  ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
  狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
</Highlight>

ハイライトをスタイリングする

<Highlight
  query="わかんない"
  colorScheme="warning"
  markProps={{ rounded: "full" }}
>
  わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！
  ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
  わかんない！私にはわかんないの！
  ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
  狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
</Highlight>

フラグメントを使う

デフォルトでは、Highlightはp要素をレンダリングします。fragmentを設定することで、highlightはフラグメントを使用します。

<Text>
  <Highlight fragment query="わかんない" colorScheme="warning">
    わかんないよ…。わっかんないよ！
    ジュー君の言ってることはひとつもわかんないよ！
    ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
    わかんない！私にはわかんないの！
    ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
    狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
  </Highlight>
</Text>

レンダリングされる要素をカスタマイズする

レンダリングされる要素をカスタマイズする場合は、useHighlightを使用します。

const chunks = useHighlight({
  query: ["わかんない", "ジュー君"],
  text: " わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！ ジュー君がいいって言ってるもの、何がいいのかわかんないよ！ わかんない！私にはわかんないの！ ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！ 狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！",
})

return (
  <Text>
    {chunks.map(({ match, text }, index) =>
      match ? (
        text === "わかんない" ? (
          <Mark key={index} colorScheme="warning">
            {text}
          </Mark>
        ) : (
          <Mark key={index} colorScheme="success">
            {text}
          </Mark>
        )
      ) : (
        text
      ),
    )}
  </Text>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`children`	-	`string` The text used for searching.
`query`	-	`string \| string[]` Can be a single string or an array of strings. These are the terms that are highlighted in the text.
`align`	-	`"-khtml-center" \| "-khtml-left" \| "-khtml-right" \| "-moz-center" \| "-moz-initial" \| "-moz-left" \| "-moz-right" \| "-webkit-center" \| "-webkit-left" \| "-webkit-match-parent" ...` The CSS `text-align` property.
`casing`	-	`"-moz-initial" \| "capitalize" \| "full-size-kana" \| "full-width" \| "inherit" \| "initial" \| "lowercase" \| "math-auto" \| "none" \| "revert-layer" ...` The CSS `text-transform` property.
`decoration`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "antiquewhite" \| "AppWorkspace" \| "aqua" ...` The CSS `text-decoration` property.
`fragment`	`false`	`boolean` If `true`, `Fragment` is used for rendering.
`markProps`	-	`MarkProps` Properties passed to the Mark component which is used to highlight the matched terms.

類似のコンポーネント

Textは、テキストの段落を表すコンポーネントです。デフォルトでは、p要素をレンダリングします。

Markは、特定のテキストを強調するコンポーネントです。

Kbdは、キーボード入力を表すコンポーネントです。

Headingは、セクションの見出しを表すコンポーネントです。デフォルトでは、h1要素をレンダリングします。

Emは、強調されたテキストを表すコンポーネントです。デフォルトでは、em要素をレンダリングします。

Code はコードブロックを表すコンポーネントです。デフォルトでは code 要素をレンダリングします。

Blockquote は引用を表すコンポーネントです。デフォルトでは blockquote 要素をレンダリングします。

Linkは、別のウェブページや同一ページ内の場所、または他のURLへのハイパーリンクを作成するコンポーネントです。

使用しているコンポーネント・フック

Markは、特定のテキストを強調するコンポーネントです。

Textは、テキストの段落を表すコンポーネントです。デフォルトでは、p要素をレンダリングします。