Skip to main content

React Hooks installation

Install SNS React Hooks v4 in a React 18 or 19 application that uses JavaScript SDK v4.

Install the packages​

Install the hooks and their peer dependencies:

npm install @bonfida/sns-react@^4 @bonfida/spl-name-service@^4 @solana/web3.js@^1.98.2 @tanstack/react-query@^5 react

Provider Setup​

Create a TanStack Query client near the application root:

import type { PropsWithChildren } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export function AppProviders({ children }: PropsWithChildren) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

RPC Configuration​

Create the web3.js Connection passed to each hook with your Solana RPC endpoint:

import { Connection } from "@solana/web3.js";

const connection = new Connection("https://your-rpc-endpoint.example");

SNS React Hooks does not create a global RPC client or wallet provider.

Next​

Continue to the React Hooks Quickstart to configure common SNS queries in a component.