@dynamic-labs-sdk/react-hooks

React hooks for the Dynamic SDK client. Provides reactive state bindings for user authentication, wallet accounts, wallet providers, and more.

Installation

npm install @dynamic-labs-sdk/react-hooks @dynamic-labs-sdk/client @tanstack/react-query react

Usage

These hooks are built on @tanstack/react-query, so your app needs a QueryClientProvider in addition to DynamicProvider. Wrap your app with both and pass your client instance:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createDynamicClient } from '@dynamic-labs-sdk/client';
import { DynamicProvider } from '@dynamic-labs-sdk/react-hooks';

const client = createDynamicClient({ environmentId: 'your-env-id' });
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <DynamicProvider client={client}>
        <MyComponent />
      </DynamicProvider>
    </QueryClientProvider>
  );
}

Then use the hooks in any child component. Each hook returns the underlying @tanstack/react-query result object, so the value you want is under .data:

import { useUser, useGetWalletAccounts } from '@dynamic-labs-sdk/react-hooks';

function MyComponent() {
  const { data: user } = useUser();
  const { data: walletAccounts } = useGetWalletAccounts();

  return (
    <div>
      <p>User: {user?.email}</p>
      <p>Wallets: {walletAccounts?.length ?? 0}</p>
    </div>
  );
}

Hooks

| Hook | Description | |------|-------------| | useUser | Current authenticated user | | useInitStatus | Client initialization status | | useSessionExpiresAt | Session expiration date | | useGetUserSocialAccounts | User's linked social accounts | | useGetWalletAccounts | Connected wallet accounts | | useGetAvailableWalletProvidersData | Available wallet providers |