React Hooks for Solana

A React hooks library for easily interacting with the Solana blockchain, built on top of gill

Welcome to @gillsdk/react, a React hooks library for easily interacting with the Solana blockchain.

@gillsdk/react is in active development. All APIs are subject to change until reaching the first major version (v1.0.0).

This React hooks library is built on top of two core libraries:

gill - modern JavaScript/TypeScript library for interacting with the Solana blockchain.
@tanstack/react-query - popular and powerful asynchronous state management for React.

Installation

Install @gillsdk/react with your package manager of choice:

npm install gill @gillsdk/react @tanstack/react-query

gill and @tanstack/react-query are peer dependencies of @gillsdk/react so you need to explicitly install them. This allows you have more control over managing dependencies yourself.

Key Features

Type-safe hooks - Full TypeScript support with proper typing for all Solana data
Built on TanStack Query - Leverages the power of React Query for caching, background refetching, and optimistic updates
Easy to use - Simple, intuitive API that follows React best practices
Server component ready - Works with Next.js and other React Server Component frameworks
Lightweight - Minimal bundle size with tree-shaking support

Available Hooks

Client Management

useSolanaClient - Get the current Solana client
useUpdateSolanaClient - Update the Solana client

Data Fetching

useAccount - Get account info and data
useBalance - Get an account's balance in lamports
useLatestBlockhash - Get the latest blockhash
useSignatureStatuses - Get the statuses of signatures
useSignaturesForAddress - Get signatures for an address
useProgramAccounts - Get all accounts owned by a program (GPA)
useTokenMint - Get a decoded token's Mint account
useTokenAccount - Get a token account for a mint and owner

Quick Example

import { lamportsToSol } from "gill";
import { useBalance } from "@gillsdk/react";
 
export function WalletBalance({ address }: { address: string }) {
  const { balance, isLoading, isError, error } = useBalance({ address });
 
  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error?.message}</div>;
 
  return (
    <div>
      <p>Balance: {lamportsToSol(balance)} SOL</p>
    </div>
  );
}