Component providers

Provide state to Ariakit components using a simple wrapper that supports controlled and uncontrolled props.

Hello everyone,

This month, we're rolling out a new feature for Ariakit: Component providers.

Component providers are optional components that act as a higher-level API on top of component stores. They wrap Ariakit components and automatically provide a store to them.

You no longer need to manually create a store and pass it as a prop to the components. Instead, you can just wrap the components with a provider:

Component stores vs. component providers

Component providers take the same props as component stores, allowing you to use them in the same manner with both controlled and uncontrolled APIs.

They also accept a store prop, enabling you to use component stores and component providers in tandem.

It's important to note that component stores aren’t going anywhere, and you do not need to migrate your code. They will continue to serve as a fundamental lower-level API.

In addition to the providers, we're also introducing context hooks such as useComboboxContext. This allows you to access the store from within components nested in providers and other top-level components like Combobox and ComboboxPopover.

You can learn more about the work and the rationale behind this feature in the Component providers RFC, authored by Dani Guardiola.

Built with Ariakit

• Nozzle (tweeted by Tanner Linsley)

• RSC Devtools (tweeted by Alvar Lagerlöf)

• Welcome UI (tweeted by Théo Mesnil)

If you've created something using Ariakit and want it featured in our next newsletter, just share your work on Twitter mentioning @ariakitjs, or reply to this email.

More Ariakit

• New example: Warning on Dialog hide
  Preventing users from accidentally closing a modal with unsaved changes by displaying a nested confirmation dialog.

• Improved examples:

  Submenu
  Animated Select
  Tab with React Router
  Tab with Next.js App Router
  Toolbar with Select

• Improved docs:

  Command

• New releases:

  v0.2.17 → v0.3.3

More Dev

• A better setTimeout

• addGlobalEventListener