Skip to main content
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.

​
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. 
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. 
const { sponsor, data, error, isLoading } = useSponsor();

​
useSimulate()

Calculates Soroban resource fees and diagnostic events for a transaction. 
const { simulate, data: simulation } = useSimulate(tx);

​
useRelayStatus()

Polls the health and metadata of the configured relay server. 
const { status, isOnline } = useRelayStatus();

​
useCreditBalance()

Fetches and updates the remaining credit balance for the project API key. 
const { balance } = useCreditBalance();

​
useGrat()

Provides access to the raw Grat client instance via React Context. 
const grat = useGrat();
View on GitHub