ValyroUI Русская версия

React 17 and 18, compound parts, headless hooks and React Native

Release · · ValyroUI team

What the October release brings: the kit now runs on three React versions, components take parts as well as props, the behaviour layer ships on its own, and the themes reach iOS and Android.

  • react and react-dom 17, 18 and 19 are supported, with the same behaviour on all three.
  • Card, Tabs, Dialog, Select, DataTable and others accept compound parts.
  • valyro-ui/headless exposes the hooks the components are built on.
  • valyro-ui-native brings the themes to React Native and Expo.

React 17, 18 and 19

react and react-dom 17, 18 and 19 are peer dependencies. Components, compound parts and the headless hooks behave the same on all three. React 19 is the primary target; React 18 goes through a small internal compatibility layer.

React 17 has two caveats: ids from useId are assigned right after mount, so server HTML has none and hydration still matches; and without a bundler Node cannot resolve React 17's react/jsx-runtime as ESM. Details are in the setup guide.

Props or parts

Card, Tabs, Accordion, Dialog, Drawer, Select, DropdownMenu, Popover, Tooltip and DataTable take either props or parts: Dialog.Trigger, Tabs.List, DataTable.Row and so on. Both forms render the same markup, on the server too.

Every part is also a named export (DialogTrigger, TabsTab, DataTableRow), for React Server Components, which cannot dot into a client component. See the parts of Dialog.

Headless hooks

valyro-ui/headless is the behaviour the components are built on, without markup or CSS: useDisclosure, useListNavigation, useDismissableLayer, useFocusTrap, useFloating, usePresence, useVirtualizer and more. No stylesheet is needed. The Headless guide has live examples.

React Native

valyro-ui-native is a set of 40+ accessible components on React Native primitives, with no native dependencies, so it works with Expo. Every ValyroUI theme is there, light and dark. Wrap the app in its ThemeProvider; useTheme() gives the tokens. Setup and previews are on the React Native page.