v5.0.0-alpha.44
Pre-release
Pre-release
Move from Reakit to Ariakit
How to migrate to Ariakit
We migrated to the new Ariakit library (reakit v2) on some of our components. To migrate easily, you can find components migration below.
To resume:
- We now pass on a
store
property the component's state and remove "State" from the hook name.
- const drawerState = useDrawerState()
+ const drawer = useDrawer()
- <Drawer {...useDrawerState}>
+ <Drawer store={drawer}>
visible
is now replaced by theopen
property- To force open a component, use now the
defaultOpen
property
- const drawerState = useDrawerState({ open: true })
+ const drawer = useDrawer({ defaultOpen: true })
- Access the actual component's state with
useState
:
- const drawerState = useDrawerState()
- const isOpen = drawerState.visible
+ const drawer = useDrawer()
+ const isOpen = drawer.useState('open')
Components
Accordion
We migrated to Ariakit and added an useAccordion
hook to play with the component's store.
+ const accordion = useAccordion()
- <Accordion title="accordion">
+ <Accordion store={accordion} title="accordion">
= ...
= </Accordion>
Drawer
Now pass the component's state from useDrawer
to the store
property:
- const drawerState = useDrawerState()
+ const drawer = useDrawer()
- <Drawer {...drawerState}>
+ <Drawer store={drawer}>
= ...
= </Drawer>
DropdownMenu
Now we pass the component's state from useDropdownMenu
to the store
property:
- const dropdownMenuState = useDropdownMenuState()
+ const dropdownMenu = useDropdownMenu()
- <DropdownMenu.Trigger {...dropdownMenuState}>
+ <DropdownMenu.Trigger store{dropdownMenu}>
= ...
= </DropdownMenu.Trigger>
- <DropdownMenu {...dropdownMenuState}>
+ <DropdownMenu store={dropdownMenu}>
- <DropdownMenu.Item {...dropdownMenuState}>
+ <DropdownMenu.Item store={dropdownMenu}>
= ...
= </DropdownMenu.Item>
= ...
= </DropdownMenu>
EmojiPicker
Now we pass the component's state from useEmojiPicker
on the store
property:
- const emojiPickerState = useEmojiPicker()
+ const emojiPicker = useEmojiPicker()
- <EmojiPicker.Trigger {...emojiPickerState}>
+ <EmojiPicker.Trigger store{useEmojiPicker}>
= ...
= </EmojiPicker.Trigger>
- <EmojiPicker.Trigger {...emojiPickerState} />
+ <EmojiPicker.Trigger store={useEmojiPicker} />
and defaultTabState
becomes defaultTabStore
Modal
Now we pass the component state from useModal
on the store
property:
- const modalState = useModalState()
+ const modal = useModal()
- <Modal {...modalState}>
+ <Modal store={modal}>
= ...
= </Modal>
Popover
Now we pass the component state from usePopover
on the store
property:
- const popoverState = usePopoverState()
+ const popover = usePopover()
- <Popover.Trigger {...popoverState}>
+ <Popover.Trigger store={popover}>
= ...
= </Popover.Trigger>
- <Popover {...popoverState}>
+ <Popover store={popover}>
= ...
= </Popover>
Tabs
Now we pass the component state from useTab
on the store
property:
- const tabState = useTabState()
+ const tab = useTab()
- <Tab.List {...tabState}>
+ <Tab.List store={tab}>
- <Tab {...tabState}>
+ <Tab store={tab}>
= ...
= </Tab>
= </Tab.List>
- <Tab.Panel {...tabState}>
+ <Tab.Panel store={tab}>
= ...
= </Tab.Panel>
and selectedId
become defaultSelectedId