v5.0.0-alpha.44

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 the open 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