useOpenState

useOpenState()

function useOpenState(initialValue): object;

Defined in: src/utils/useOpenState/useOpenState.ts:24

Handles open/close or similar boolean states. Mainly aims to improve readability.

Parameters

Parameter	Type	Default value
initialValue	InitialState<boolean>	false

Returns

object

Name	Type	Defined in
isOpen	boolean	src/utils/useOpenState/useOpenState.ts:33
setIsOpen	Dispatch<SetStateAction<boolean>>	src/utils/useOpenState/useOpenState.ts:33
close()	() => void	src/utils/useOpenState/useOpenState.ts:33
open()	() => void	src/utils/useOpenState/useOpenState.ts:33
toggle()	() => void	src/utils/useOpenState/useOpenState.ts:33

Example

const modal = useOpenState()
<button onClick={modal.open} />
<Modal isOpen={modal.isOpen} />

---

useStatefulOpenState()

function useStatefulOpenState<T>(initialStateValue?, initialValue?): object;

Defined in: src/utils/useOpenState/useOpenState.ts:45

Implements a stateful open/closed mechanism that preserves component state between transitions.

Type Parameters

Type Parameter
T

Parameters

Parameter	Type
initialStateValue?	T
initialValue?	InitialState<boolean>

Returns

object

Name	Type	Defined in
isOpen	boolean	src/utils/useOpenState/useOpenState.ts:61
close()	() => void	src/utils/useOpenState/useOpenState.ts:61
open()	(state) => void	src/utils/useOpenState/useOpenState.ts:61
state	T | undefined	src/utils/useOpenState/useOpenState.ts:61

Remarks

This pattern is particularly useful in scenarios requiring:

• A boolean flag to control visibility (open/closed state)
• Separate state to determine opened entity
• Saving state even after closing, which prevents flickering during exit animations