ValyroUI English version

React 17 и 18, составные части, headless‑хуки и React Native

Релиз · · Команда ValyroUI

Что даёт октябрьский релиз: кит работает на трёх версиях React, компоненты принимают части наравне с пропсами, слой поведения поставляется отдельно, а темы доходят до iOS и Android.

  • Поддерживаются react и react-dom 17, 18 и 19, поведение одинаковое на всех трёх.
  • Card, Tabs, Dialog, Select, DataTable и другие принимают составные части.
  • valyro-ui/headless открывает хуки, на которых построены компоненты.
  • valyro-ui-native переносит темы в React Native и Expo.

React 17, 18 и 19

react и react-dom 17, 18 и 19 — peer-зависимости. Компоненты, составные части и headless-хуки ведут себя одинаково на всех трёх. Основная цель — React 19; React 18 работает через небольшой внутренний слой совместимости.

У React 17 две оговорки: id из useId назначаются сразу после монтирования, поэтому в серверном HTML их нет и гидратация совпадает; а без сборщика Node не находит react/jsx-runtime React 17 как ESM. Подробности — в руководстве по установке.

Пропсы или части

Card, Tabs, Accordion, Dialog, Drawer, Select, DropdownMenu, Popover, Tooltip и DataTable принимают либо пропсы, либо части: Dialog.Trigger, Tabs.List, DataTable.Row и так далее. Обе формы дают одинаковую разметку, в том числе на сервере.

Каждая часть есть и как именованный экспорт (DialogTrigger, TabsTab, DataTableRow) — для React Server Components, где нельзя обратиться к части через точку у клиентского компонента. Посмотрите части Dialog.

Headless-хуки

valyro-ui/headless — поведение, на котором построены компоненты, без разметки и CSS: useDisclosure, useListNavigation, useDismissableLayer, useFocusTrap, useFloating, usePresence, useVirtualizer и другие. Таблица стилей не нужна. Живые примеры — в руководстве по headless.

React Native

valyro-ui-native — 40+ доступных компонентов на примитивах React Native без нативных зависимостей, поэтому он работает с Expo. В нём есть все темы ValyroUI, светлые и тёмные. Оберните приложение в его ThemeProvider; useTheme() отдаёт токены. Установка и превью — на странице React Native.