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

<Meta of={IsFocusedStories} />

# useIsFocused

`useIsFocused` is a generic hook that returns a boolean (wrapped in an object) value that represents the focus state of the element referenced by the provided `ref`.

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

## Usage

The hook accepts the ref as input parameter and returns a boolean (wrapped in an object) value that represents the focus state of given ref.
Ref should be an HTMLElement.

### Input parameters

<Controls />

### Function Signature

```typescript
const useIsFocused: <T extends HTMLElement>(focusRef: MutableRefObject<T | null>): { isFocused: boolean } => boolean;
```

## Demo

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