@ 动态- labs- sdk/ react- hooks

动态SDK客户端的回放钩. 为用户认证,钱包账户,钱包提供者等提供被动状态约束.

安装

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

使用量

这些钩子是建立在 @tanstack/react-query,所以你的应用程序需要一个 QueryClientProvider 计外 DynamicProvider。将您的应用程序包成两个并传递您的客户实例:

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>
  );
}

然后在任何儿童成分中使用钩子. 每个钩子返回下方 @tanstack/react-query 结果对象,所以您想要的值在下面 .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>
  );
}

钩子