> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blink.cash/llms.txt
> Use this file to discover all available pages before exploring further.

# React Hook

> API reference for the useBlinkDeposit React hook.

The `useBlinkDeposit` hook wraps the `Deposit` class with reactive React state. It manages the instance lifecycle and cleans up on unmount.

```typescript theme={null}
import { useBlinkDeposit } from '@swype-org/deposit/react';
```

<Info>
  The React entry point requires `react` >= 18 as a peer dependency.
</Info>

## Usage

```tsx theme={null}
function DepositButton() {
  const {
    status,
    result,
    error,
    displayMessage,
    isActive,
    requestDeposit,
    focus,
    close,
  } = useBlinkDeposit({
    signer: '/api/sign-payment',
  });

  return (
    <>
      <button
        onClick={() =>
          requestDeposit({
            amount: 50,
            chainId: 8453,
            address: '0x1a5FdBc891c5D4E6aD68064Ae45D43146D4F9f3a',
            token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
          })
        }
        disabled={isActive}
      >
        {status === 'signer-loading' ? 'Preparing...' : 'Deposit $50'}
      </button>
      {error && <p className="error">{displayMessage}</p>}
      {result && <p>Transfer {result.transfer.id} complete!</p>}
    </>
  );
}
```

## Parameters

The hook accepts a single `DepositConfig` object. See [Deposit Class](/sdk-reference/checkout-class) for the full config reference.

```typescript theme={null}
useBlinkDeposit(config: DepositConfig): UseBlinkDepositReturn
```

The `Deposit` instance is created once on first render and destroyed on unmount. The `config` is read during initialization only. Changing config props after mount does not reconfigure the instance.

## Return value

| Property         | Type                                                  | Description                                                                                                   |
| ---------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| `status`         | `DepositStatus`                                       | Current phase: `'idle'`, `'signer-loading'`, `'iframe-active'`, `'completed'`, or `'error'`.                  |
| `result`         | `DepositResult \| null`                               | Last successful deposit result. Reset to `null` when a new deposit starts.                                    |
| `error`          | `DepositError \| null`                                | Last transfer error. Reset to `null` on successful completion.                                                |
| `displayMessage` | `string \| null`                                      | User-friendly error message derived from `error` via `getDisplayMessage()`, or `null` when there is no error. |
| `isActive`       | `boolean`                                             | `true` when `status` is `'signer-loading'` or `'iframe-active'`.                                              |
| `requestDeposit` | `(request: DepositRequest) => Promise<DepositResult>` | Start a deposit flow. Opens the modal iframe with the hosted transfer.                                        |
| `focus`          | `() => void`                                          | No-op. Retained for API compatibility.                                                                        |
| `close`          | `() => void`                                          | Close the transfer iframe and reset to idle.                                                                  |

## Exported types

The React entry point re-exports commonly used types for convenience:

```typescript theme={null}
import type {
  DepositConfig,
  DepositStatus,
  DepositRequest,
  DepositResult,
} from '@swype-org/deposit/react';

import { DepositError, getDisplayMessage } from '@swype-org/deposit/react';
```