import { Meta, Story, Canvas, Controls } from "@storybook/blocks";
import * as OverflowStories from "./use-is-overflow.stories";

<Meta of={OverflowStories} />

# useIsOverflow

`useIsOverflow` is a generic hook used to detect if an element is vertically and/or horizontally overflowing.

```javascript
import { useIsOverflow } from "@chromia/ui-kit";
```

## Usage

The hook accepts the input parameters below and returns a boolean value that represents the overflow state of the element referenced by the provided `ref`.

### Input parameters

<Controls />

### Function Signature

```typescript
const useIsOverflow: <T extends HTMLElement | null>({
  ref,
  direction,
  trigger,
}: {
  ref: React.MutableRefObject<T>;
  direction?: OverflowDirection | undefined;
  trigger?: unknown;
}) => boolean;
```

## Demo

<Canvas style={{ background: "#1F1A23" }}>
  <Story id="hooks-useisoverflow--default" />
</Canvas>