open・close・toggleで開閉状態を管理するフック
defaultOpenbooleanfalse| Prop | Type | Default |
|---|---|---|
defaultOpen | boolean | false |
isOpenbooleanopen() => voidclose() => voidtoggle() => void| Prop | Type | Default |
|---|---|---|
isOpen | boolean | - |
open | () => void | - |
close() => void |
| - |
toggle | () => void | - |
State: Closed
import { useDisclosure } from '@k8ordo/ui';const { isOpen, open, close, toggle } = useDisclosure();
return (
<div>
<button onClick={toggle}>Toggle</button>
<button onClick={open}>Open</button>
<button onClick={close}>Close</button>
{isOpen && <p>Content is visible</p>}
</div>
);