React Hooks quickstart

Set up the TanStack Query provider and use SNS React Hooks v4 to resolve a domain in a React component.

Configure the query provider

Complete the React Hooks installation, create a QueryClient, and wrap the component that uses SNS hooks with QueryClientProvider:

App.tsx

import { useResolve } from "@bonfida/sns-react";
import { Connection } from "@solana/web3.js";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

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

function DomainLookup() {
  const domain = useResolve(connection, "name.sns"); // Or use `useSafeResolve`.

  if (domain.isPending) return <p>Loading...</p>;
  if (domain.isError) return <p>{domain.error.message}</p>;

  return <p>Resolved target: {domain.data.toBase58()}</p>;
}

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <DomainLookup />
    </QueryClientProvider>
  );
}

Pass the application-owned web3.js Connection to each SNS hook. Query failures are available through the hook result's isError and error fields.

New hook: useSafeResolve

A new useSafeResolve hook has also been added, currently functioning identically to useResolve. Once SRS-backed .sol resolution is enabled in a future update, useSafeResolve will only return an address if the .sol domain and the corresponding .sns domain resolve to the same address — throwing an error on mismatch.

This is intended as a short-term safety measure for the period immediately following SRS-backed .sol enablement. In the long term, .sns and .sol should be treated as separate namespaces, and integrations should use useResolve instead.

Recommended alternative: rather than relying on useSafeResolve (which throws on mismatch), apps and wallets can implement custom logic to detect resolution mismatches and surface a warning or confirmation dialog to the user.

Next steps

• Use the React Hooks API Reference for primary domains, wallet-owned domains, records, profile pictures, reverse lookups, subdomains, and query options.
• Follow the JavaScript SDK installation when you need direct SDK reads or transaction instruction builders.