Ariakit
/

DialogProvider

Provides a dialog store to Dialog components.

Code examples

Optional Props


defaultOpen

boolean | undefined = false

Whether the content should be visible by default.


disclosure

DisclosureStore | null | undefined

A reference to another disclosure store that controls another disclosure component to keep them in sync. Element states like contentElement and disclosureElement won't be synced. For that, use the store prop instead.

Live examples


open

boolean = false

Whether the content is visible.

Live examples


setMounted

((mounted: boolean) => void) | undefined

A callback that gets called when the mounted state changes.

Code examples

const [mounted, setMounted] = useState(false);
const disclosure = useDisclosureStore({ setMounted });

setOpen

((open: boolean) => void) | undefined

A callback that gets called when the open state changes.

Code examples

const [open, setOpen] = useState(false);
const disclosure = useDisclosureStore({ open, setOpen });

store

Store<Partial<S>> | undefined

Another store object that will be kept in sync with the original store.

Live examples


animated

number | boolean | undefined

Deprecated: Manually setting the animated prop is no longer necessary. This will be removed in a future release.

Determines whether the content should animate when it is shown or hidden.

  • If true, the animating state will be true when the content is shown or hidden and it will wait for a CSS animation/transition to end before becoming false.

  • If it's set to a number, the animating state will be true when the content is shown or hidden and it will wait for the number of milliseconds to pass before becoming false.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue