Provide state to Ariakit components using a simple wrapper that supports controlled and uncontrolled props.
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.
If you choose not to use component providers, you will need to manually pass the
store prop to each top-level component.
Component providers can act as uncontrolled containers. In such a scenario, you can supply the initial state using props:
Component providers may also accept callbacks for state changes. These functions conventionally bear the name of the state property they modify, prefixed with the word
set. They are invoked with the new state whenever an update occurs.
These state setters serve various purposes, such as updating another state, executing side effects, or implementing features like
onOpenChange, and so on.
You can take full control of the state by passing the exact property, without prefixes, as a prop to the provider component. In this case, the state will be considered controlled and the component will not update the state internally. It will only call the state setter. You can use this to implement a controlled component using
const [value, setValue] = React.useState("Banana");
You can also receive controlled props, such as
onChange, from a parent component and pass them directly to the provider component:
You can use both component providers and component stores together if you need fine-grained control over the state. In this case, you can pass the store as a prop to the provider component:
If you're inside a React component that's wrapped within an Ariakit component provider, you can benefit from Ariakit context hooks to access the nearest component store in the tree:
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Guide.