useDisclosureStore
Creates a disclosure store to control the state of Disclosure 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);
setOpen
((open: boolean) => void) | undefined
A callback that gets called when the
open
state
changes.
Code examples
const [open, setOpen] = useState(false);
store
Store<Partial<S>> | undefined
Another store object that will be kept in sync with the original store.
Live examples
animated
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
, theanimating
state will betrue
when the content is shown or hidden and it will wait for a CSS animation/transition to end before becomingfalse
.If it's set to a number, the
animating
state will betrue
when the content is shown or hidden and it will wait for the number of milliseconds to pass before becomingfalse
.
Return Props
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
setOpen
SetState<boolean>
Sets the open
state.
Live examples
Code examples
store.setOpen(true);
store.setOpen((open) => !open);
show
() => void
Sets the open
state to true
.
Live examples
hide
() => void
Sets the open
state to false
.
Live examples
toggle
() => void
Toggles the
open
state.
stopAnimation
stopAnimation
() => void
Deprecated: Use setState("animating", false)
instead.
Sets the animating
state to false
, which will automatically set the
mounted
state to false
if it was true
. This means that the content
element can be safely unmounted.
setContentElement
SetState<HTMLElement | null>
Sets the contentElement
state.
setDisclosureElement
SetState<HTMLElement | null>
Sets the disclosureElement
state.
Live examples
getState
() => S
Returns the current store state.
setState
<K extends keyof S>(key: K, value: SetStateAction<S[K]>) => void
Sets a state value.
useState
useState
UseState<StoreState<T>>
Deprecated: Use
useStoreState
instead.
Re-renders the component when the state changes and returns the current state.