Импорт компонентов и хуков

React Aria — это библиотека, предоставляющая низкоуровневые хуки и утилиты для создания доступных компонентов интерфейса. Основная философия заключается в том, чтобы разработчик мог управлять логикой и поведением компонентов, не заботясь о реализации DOM и ARIA-атрибутов вручную. Работа с React Aria строится через хуки и примитивные компоненты, которые импортируются из пакета @react-aria.

Импорт основных хуков

React Aria предоставляет отдельные хуки для разных видов интерактивности и управления состоянием. Пример импорта хуков выглядит следующим образом:

import { useButton } from '@react-aria/button';
import { useCheckbox } from '@react-aria/checkbox';
import { useFocusRing } from '@react-aria/focus';
import { useMenu } from '@react-aria/menu';
import { useMenuItem } from '@react-aria/menu';
import { useOverlay } from '@react-aria/overlays';
  • useButton — добавляет поведение кнопки с корректными ARIA-атрибутами и поддержкой клавиатуры.
  • useCheckbox — управляет состоянием и доступностью чекбоксов.
  • useFocusRing — обеспечивает визуальную индикацию фокуса для компонентов.
  • useMenu и useMenuItem — хуки для построения доступных меню с поддержкой навигации с клавиатуры.
  • useOverlay — упрощает работу с всплывающими элементами (модальные окна, тултипы, панели).

Импорт компонентов для UI

React Aria ориентирован на хуки, но вместе с хуками часто используются компоненты из React Spectrum, который строится поверх React Aria. Тем не менее, многие компоненты можно использовать отдельно, создавая свои обертки. Пример типичного импорта компонентов Spectrum:

import { Button } from '@react-spectrum/button';
import { Checkbox } from '@react-spectrum/checkbox';
import { Dialog, DialogTrigger } from '@react-spectrum/dialog';
import { Menu, MenuItem } from '@react-spectrum/menu';
  • Button и Checkbox используют внутренние хуки React Aria для управления состоянием и доступностью.
  • Dialog и DialogTrigger упрощают создание модальных окон с корректной поддержкой ARIA.
  • Menu и MenuItem интегрируются с хуками useMenu и useMenuItem.

Структурирование импорта

Для поддержания читаемости кода рекомендуется группировать импорты по типу:

  1. Основные хуки React Aria:
import { useButton, useCheckbox, useFocusRing } from '@react-aria';
  1. Специфические хуки для отдельных компонентов:
import { useMenu, useMenuItem } from '@react-aria/menu';
import { useOverlay } from '@react-aria/overlays';
  1. Компоненты интерфейса (React Spectrum или кастомные обертки):
import { Button, Checkbox } from '@react-spectrum';

Импорт типов и утилит

React Aria также экспортирует типы и утилиты для TypeScript и улучшения безопасности типов:

import type { AriaButtonProps } from '@react-aria/button';
import type { AriaCheckboxProps } from '@react-aria/checkbox';
import { mergeProps } from '@react-aria/utils';
  • mergeProps — утилита для объединения нескольких объектов пропсов, учитывая ARIA-атрибуты.
  • Типы AriaButtonProps, AriaCheckboxProps помогают корректно типизировать пропсы компонентов.

Динамический импорт и код-сплиттинг

Для оптимизации загрузки приложения рекомендуется использовать динамический импорт хуков и компонентов:

import React, { Suspense, lazy } from 'react';

const Button = lazy(() => import('@react-spectrum/button').then(module => ({ default: module.Button })));

export default function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <Button variant="cta">Нажми меня</Button>
    </Suspense>
  );
}

Такой подход позволяет загружать только необходимые компоненты, снижая общий размер бандла.

Практические рекомендации

  • Импортируйте только то, что используете — React Aria имеет модульную структуру, лишние импорты увеличивают размер бандла.
  • Соблюдайте последовательность импорта: сначала хуки, затем компоненты, потом утилиты и типы.
  • Используйте типизацию для пропсов компонентов, чтобы ловить ошибки на этапе компиляции.
  • Динамический импорт рекомендуется для редко используемых компонентов, таких как диалоги или сложные меню.

Пример комплексного импорта

import { useButton } from '@react-aria/button';
import { useCheckbox } from '@react-aria/checkbox';
import { useFocusRing } from '@react-aria/focus';
import { mergeProps } from '@react-aria/utils';

import { Button, Checkbox } from '@react-spectrum';

В этом примере объединяются хуки для логики, утилиты для безопасного объединения пропсов и компоненты интерфейса для рендеринга.

Такое структурирование импорта обеспечивает чистоту кода, поддержку доступности и упрощает сопровождение проектов на React с использованием React Aria.

Оглавление