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

# React SDK Quickstart

> ## Installation

**Version:** 2.0.4 | [View on npm](https:/www.npmjs.com/package/@sqds/grid-react)

React hooks for Grid SDK - authentication, balances, and transactions.

## Installation

```bash theme={null}
npm install @sqds/grid-react
```

## Quick Start

### 1. Setup Provider

```tsx theme={null}
import { GridProvider } from "@sqds/grid-react";

export default function App({ children }) {
  return <GridProvider>{children}</GridProvider>;
}
```

**For Production:** Generate an App ID in the [Grid Dashboard](https:/grid.squads.xyz/dashboard), whitelist your domain, and pass it to the provider:

```tsx theme={null}
<GridProvider appId="your-app-id" environment="production">
  {children}
</GridProvider>
```

### 2. Email Authentication

```tsx theme={null}
import { useEmailAuth } from "@sqds/grid-react";

function Auth() {
  const { requestOtp, verifyOtp, logout, user, account, isAuthenticated } = useEmailAuth();

  const handleLogin = async () => {
    await requestOtp("user@example.com");
    const code = prompt("Enter OTP:");
    await verifyOtp(code);
  };

  if (isAuthenticated) {
    return (
      <div>
        <p>Signed in as {user?.data.email}</p>
        <p>Account: {account?.data.address}</p>
        <button onClick={logout}>Logout</button>
      </div>
    );
  }

  return <button onClick={handleLogin}>Sign In</button>;
}
```

### 3. Balances and Transfers

```tsx theme={null}
import { useBalance, useTransfer } from "@sqds/grid-react";

function Wallet() {
  const { balance } = useBalance({ symbol: "USDC" });
  const { transfer, isLoading, signature } = useTransfer();

  const handleSend = async () => {
    await transfer({ to: "recipient_address", amount: "1000000", currency: "usdc" });
  };

  return (
    <div>
      <p>{balance?.amountDecimal || "0"} USDC</p>
      <button onClick={handleSend} disabled={isLoading}>
        Send 1 USDC
      </button>
      {signature && <p>Transaction: {signature}</p>}
    </div>
  );
}
```

## Available Hooks

* **`useEmailAuth()`** - Email + OTP authentication with session management
* **`usePasskeyAuth()`** - WebAuthn passkey authentication
* **`useAccount()`** - Real-time account state
* **`useBalance(options)`** - Fetch single token balance
* **`useBalances(options)`** - Fetch all balances with pagination
* **`useTransfer()`** - Send funds
* **`useTransfers(options)`** - Fetch transfer history with filtering
* **`useGrid()`** - Access Grid SDK client directly

## TypeScript

```tsx theme={null}
import type { EmailAuthState, PasskeyAuthState, UseBalanceResult } from "@sqds/grid-react";
```