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

# React SDK

> React hooks and components for Grat integration.

<Info>
  The React SDK is currently planned for Phase 4. You can use the TypeScript SDK directly within your React components today to build zero-gas experiences.
</Info>

### Using the TypeScript SDK in React Today

You can easily integrate Grat by initializing the client in a configuration file and using it within your event handlers or custom hooks.

```tsx theme={null}
import { useState } from 'react';
import { Grat } from '@grat-official-sdk/sdk';
import { buildPaymentTx } from './stellar-utils'; // Your tx builder

const grat = Grat.testnet();

export function SendButton({ userKp }) {
  const [loading, setLoading] = useState(false);

  const handleSend = async () => {
    setLoading(true);
    try {
      // 1. Build and sign your transaction
      const tx = await buildPaymentTx(userKp);
      tx.sign(userKp);

      // 2. Sponsor via Grat
      const result = await grat.sponsor(tx);
      alert(`Sent! Hash: ${result.hash}`);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <button onClick={handleSend} disabled={loading}>
      {loading ? 'Sponsoring...' : 'Send USDC'}
    </button>
  );
}
```

### Planned Hooks API

The future React SDK will provide a collection of hooks to handle state management, loading indicators, and error states automatically.

#### `useSponsor()`

Returns a function to sponsor transactions and the current execution state.

```typescript theme={null}
const { sponsor, data, error, isLoading } = useSponsor();
```

#### `useSimulate()`

Calculates Soroban resource fees and diagnostic events for a transaction.

```typescript theme={null}
const { simulate, data: simulation } = useSimulate(tx);
```

#### `useRelayStatus()`

Polls the health and metadata of the configured relay server.

```typescript theme={null}
const { status, isOnline } = useRelayStatus();
```

#### `useCreditBalance()`

Fetches and updates the remaining credit balance for the project API key.

```typescript theme={null}
const { balance } = useCreditBalance();
```

#### `useGrat()`

Provides access to the raw Grat client instance via React Context.

```typescript theme={null}
const grat = useGrat();
```

[View on GitHub](https://github.com/gratnetwork/grat)