React Highlight の概要

Ignite UI for React Highlight は、ページ内コンテンツの一部を強調表示して、ユーザーの目につきやすくするためのコンポーネントです。軽量で扱いやすく、他のコンポーネントと組み合わせることで、よりインタラクティブで魅力的な UI を構築できます。

使用方法

IgrHighlight コンポーネントを使用するには検索対象のコンテンツをこのタグで囲むだけです。コンポーネントは <IgrHighlight> タグ内のすべての子要素のテキストを検索し、指定した文字列に一致する箇所をハイライト表示します。

まず次のコマンドで Ignite UI for React をインストールします。

npm install igniteui-react

次に IgrHighlight と必要な CSS を以下のようにインポートします。

import { IgrHighlight } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Ignite UI for React の全体的な導入については、はじめに を参照してください。

IgrHighlight コンポーネントを使い始める最もシンプルな例は次のとおりです。

<IgrHighlight search-text='dolor'>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</IgrHighlight>

<IgrHighlight> タグでハイライトしたい文字列を含むコンテンツを囲みます。

ハイライト対象のテキストは search-text 属性で指定します。上の例では “dolor” がハイライト表示されます。

大文字・小文字を区別した一致

IgrHighlight コンポーネントは case-sensitive 属性も提供します。既定値は false で、大文字・小文字を区別しない検索になります。true を設定すると、大文字・小文字を区別した検索になります。

次の例を見てください。

<IgrHighlight search-text='lorem' case-sensitive={true}>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</IgrHighlight>

この場合、検索文字列は小文字の “lorem” ですが、コンテンツ側は先頭が大文字の Lorem のため、一致件数は 0 になります。

検索入力と Highlight の連携

最も一般的な使い方は IgrHighlight を検索用の IgrInput コンポーネントに連携しユーザーの入力に応じて一致箇所をリアルタイムでハイライトする方法です。

連携するには IgrInput コンポーネントの igcInput イベントを監視しイベント発生ごとに IgrHighlight コンポーネントの search-text 属性へ入力値を設定します（標準の input イベントでも対応可能です）。

まず IgrHighlight のプロパティを操作するために参照を取得します。最も簡単なのは ref を使う方法です。

import { useRef } from 'react';

const highlightRef = useRef<IgrHighlight>(null);

<IgrHighlight ref={highlightRef}>
    ...
</IgrHighlight>

次に igcInput イベントのたびに呼び出される検索文字列更新関数を作成します。

const onInput = ({ detail }: CustomEvent<string>) => {
    highlightRef.current.searchText = detail;
};

<IgrInput label="Search" onigcInput={onInput}></IgrInput>

メソッド

このコンポーネントは一致結果を移動するための 2 つのメソッドも提供します。next() は次の一致へ、previous() は前の一致へ移動します。

これらを使うことで前後移動ボタンを追加して検索体験をよりインタラクティブにできます。

const highlightRef = useRef<IgrHighlight>(null);

const prev = () => {
    highlightRef.current?.previous();
};

const next = () => {
    highlightRef.current?.next();
};

<IgrInput label="Search">
    <IgrIconButton onClick={prev} variant="flat" name="navigate_before" collection="internal" slot="suffix"></IgrIconButton>
    <IgrIconButton onClick={next} variant="flat" name="navigate_next" collection="internal" slot="suffix"></IgrIconButton>
</IgrInput>

previous() と next() はどちらも IgrHighlight.preventScroll オプションを受け取れます。これを使うと移動時にアクティブな一致箇所へページが自動スクロールする動作を抑止できます。既定値は false です。

const prev = () => {
    highlightRef.current?.previous({ preventScroll: true });
};

const next = () => {
    highlightRef.current?.next({ preventScroll: true });
};

追加機能

このコンポーネントには一致状態を追跡するための読み取り専用プロパティもあります。size は一致件数の合計、current は現在アクティブな一致のインデックスを返します。

これらを使うと現在位置と総件数を表示する検索ステータス表示を実装できます。

以下はこれらのプロパティで検索ステータスを作成する簡単な例です。

const highlightRef = useRef<IgrHighlight>(null);
const statusRef = useRef<HTMLParagraphElement>(null);

const updateStatus = () => {
    const highlight = highlightRef.current;
    const status = statusRef.current;

    status.textContent = highlight.size
      ? `${highlight.current + 1} of ${highlight.size} match${highlight.size === 1 ? '' : 'es'}`
      : '';
}

入力値が変わるたび、または次へ/前へボタンがクリックされるたびに updateStatus() を呼び出します。

const onInput = ({ detail }: CustomEvent<string>) => {
    highlightRef.current.searchText = detail;
    updateStatus();
};

const prev = () => {
    highlightRef.current?.previous();
    updateStatus();
};

const next = () => {
    highlightRef.current?.next();
    updateStatus();
};

<IgrInput label="Search" onigcInput={onInput}>
    <IgrIconButton onClick={prev} variant="flat" name="navigate_before" collection="internal" slot="suffix" ></IgrIconButton>
    <IgrIconButton onClick={next} variant="flat" name="navigate_next" collection="internal" slot="suffix" ></IgrIconButton>
    <p ref={statusRef} slot="helper-text"></p>
</IgrInput>

<IgrHighlight ref={highlightRef}>

スタイル設定

IgrHighlight コンポーネントは全体の見た目を調整できる 4 つの CSS 変数を提供します。

• --foreground ハイライト対象テキストの文字色
• --background ハイライト対象テキストの背景色
• --foreground-active アクティブなハイライト対象テキストの文字色
• --background-active アクティブなハイライト対象テキストの背景色

igc-highlight {
    --background: var(--ig-gray-700);
    --foreground: var(--ig-gray-700-contrast);
    --background-active: var(--ig-warn-500);
    --foreground-active: var(--ig-warn-500-contrast);
}

API リファレンス

追加リソース

• Ignite UI for React Forums
• Ignite UI for React GitHub