Highlight

Компонент Highlight используется для визуального выделения части текста внутри строки или абзаца, сохраняя при этом возможность работать с обычным текстом. Он особенно полезен для подсветки ключевых слов, поисковых терминов или важных фраз в тексте.

Синтаксис базового использования:

import { Highlight, Text } from "@chakra-ui/react";

<Text>
  <Highlight
    query="Chakra UI"
    styles={{ px: "2", py: "1", bg: "yellow.200", rounded: "md" }}
  >
    Chakra UI — это мощная библиотека компонентов для React.
  </Highlight>
</Text>

В данном примере слово “Chakra UI” будет подсвечено с фоновым цветом yellow.200 и скруглёнными краями. Остальная часть текста останется обычной.

Параметры компонента Highlight

  • query — строка или массив строк, которые нужно подсветить.
  • styles — объект стилей Chakra UI, применяемый к подсвеченному тексту.
  • children — текст, внутри которого будет выполняться поиск и подсветка.

Примеры использования разных форматов query:

<Highlight
  query={["React", "Chakra UI"]}
  styles={{ bg: "blue.100", fontWeight: "bold" }}
>
  React и Chakra UI позволяют быстро создавать интерфейсы.
</Highlight>

В этом примере одновременно подсвечиваются слова React и Chakra UI.

Настройка стилей подсветки

Компонент поддерживает все стандартные стили Chakra UI, включая:

  • Цвет фона (bg, backgroundColor)
  • Цвет текста (color, textColor)
  • Скругление углов (rounded, borderRadius)
  • Отступы (px, py, mx, my)
  • Толщина и стиль шрифта (fontWeight, fontStyle)

Пример с более сложной стилизацией:

<Highlight
  query="важное"
  styles={{
    bg: "red.100",
    color: "red.800",
    fontWeight: "semibold",
    px: 3,
    py: 1,
    rounded: "lg",
    textTransform: "uppercase"
  }}
>
  Это очень важное уведомление для всех пользователей.
</Highlight>

Поддержка нескольких слов и регистрозависимость

По умолчанию поиск чувствителен к регистру. Если необходимо подсвечивать текст независимо от регистра, нужно привести и query, и текст к единому регистру перед передачей компоненту.

Пример:

const text = "Chakra UI удобен и гибок";
const query = "chakra ui";

<Highlight
  query={query.toLowerCase()}
  styles={{ bg: "green.200" }}
>
  {text.toLowerCase()}
</Highlight>

Вложенные компоненты и интерактивность

Highlight можно использовать внутри любых компонентов Chakra UI, включая Box, Heading, Text. Это позволяет сочетать подсветку с интерактивными элементами, например, ссылками или кнопками.

<Text>
  Ознакомьтесь с <Highlight query="документацией" styles={{ bg: "yellow.200" }}>документацией</Highlight> на официальном сайте.
</Text>

В примере подсвеченное слово «документацией» может быть обёрнуто в тег <a> или использовать onClick для интерактивного поведения.

Производительность и обработка больших текстов

Для больших объемов текста рекомендуется:

  • Использовать массив слов в query, чтобы подсветка выполнялась единым проходом.
  • Минимизировать повторные рендеры компонента при динамическом изменении текста.
  • При необходимости динамически подсвечивать слова, применять мемоизацию через React.memo или useMemo.

Пример с мемоизацией:

const highlightedText = useMemo(() => (
  <Highlight query={["React", "Chakra UI"]} styles={{ bg: "blue.100" }}>
    React и Chakra UI позволяют быстро создавать интерфейсы.
  </Highlight>
), []);

Сочетание с темами Chakra UI

Highlight полностью интегрирован с системой тем Chakra UI. Цвета bg и color могут быть определены через объект темы, что обеспечивает согласованность стиля с остальным приложением.

<Highlight
  query="React"
  styles={{ bg: "primary.100", color: "primary.800" }}
>
  React упрощает разработку интерфейсов.
</Highlight>

Итоговая структура использования

  1. Импортировать Highlight из @chakra-ui/react.
  2. Передать текст через children.
  3. Указать ключевые слова в query.
  4. Настроить визуальные стили через styles.
  5. Вложить компонент в любой блок, поддерживающий текст (Text, Heading, Box).

Компонент Highlight обеспечивает простую и гибкую подсветку текста, позволяя выделять ключевые слова, сохраняя при этом полную совместимость со стилями и темами Chakra UI. Он идеально подходит для документации, поисковых интерфейсов и любых приложений, где важна визуальная акцентуация текста.

Оглавление