import { Meta } from "@storybook/blocks";

<Meta title="Hooks/use-disclosure" />

# use-disclosure hook

Control the visibility of content.

## Purpose

The use-disclosure hook is used to detect and control the visibility of a
component by providing events `onOpen`, `onClose`, and `onToggle` which alter
the `isOpen` state.

By default, `isOpen` is false, but you can pass `true` to the hook to change
the initial state.

## Usage

The most common scenario is the combination of a toggle button outside of the
disclosed component and a close button on the inside.

```jsx
import React from "react";
import { useDisclosure } from "@conveyorhq/arrow-ds";

export const Component = () => {
  const initialState = true; // optional, false otherwise
  const { isOpen, onClose, onToggle } = useDisclosure(initialState);

  return (
    <Box>
      <Button onClick={onToggle}>Toggle box</Button>
      <Box hidden={isOpen}>
        <Button onClick={onClose}>Close box</Button>
        <Paragraph>Box content</Paragraph>
      </Box>
    </Box>
  );
};
```

## Return values

- `isOpen`: whether or not the content has been disclosed
- `onOpen`: function to show the content; sets `isOpen` to `true`
- `onClose`: function to hide the content; sets `isOpen` to `false`
- `onToggle`: function to either show or hide the content based on the value of `isOpen`

## API

### defaultIsOpen

Determines the default visibility

Required: No<br />
Default value: `false`<br />
Type: `boolean`