Para’s React hooks provide an intuitive way to manage wallet state, handle transactions, and interact with the Para SDK. These hooks are built on top of TanStack Query (React Query) for efficient data fetching and state management.

​
Prerequisites

Before using Para’s React hooks, ensure you have:

  1. Set up the Para Modal in your application following one of our framework integration guides
  2. Wrapped your application with the ParaProvider
  3. Installed the required dependencies:
npm install @getpara/react-sdk@alpha @tanstack/react-query

​
Provider Setup

To use Para’s React hooks, wrap your application with ParaProvider:

import { Environment, ParaProvider, ParaModal } from "@getpara/react-sdk@alpha";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          env: Environment.DEV,
          apiKey: "your-api-key",
        }}>
        <YourApp />
        <ParaModal />
      </ParaProvider>
    </QueryClientProvider>
  );
}

​
Hook Categories

​
Query Hooks

Query hooks provide read-only access to Para state using React Query’s useQuery:

useAccount

useWallet

useWalletBalance

​
Mutation Hooks

Mutation hooks perform state changes and actions using React Query’s useMutation:

​
Authentication

useSignUpOrLogIn

useVerifyNewAccount

useLogout

​
Wallet Operations

useSignMessage

useSignTransaction

useCreateWallet

​
Session Management

useKeepSessionAlive

useIssueJwt

​
Utility Hooks

Utility hooks provide access to core functionality without React Query:

useClient

useModal

useWalletState

​
Quick Example

Here’s a simple example using multiple hooks together:

import { useAccount, useWallet, useSignMessage, useModal } from "@getpara/react-sdk@alpha";

function WalletComponent() {
  const { data: account } = useAccount();
  const { data: wallet } = useWallet();
  const { signMessageAsync } = useSignMessage();
  const { openModal } = useModal();

  const handleSign = async () => {
    if (!wallet) return;
    
    const result = await signMessageAsync({
      messageBase64: Buffer.from("Hello Para!").toString("base64"),
    });
    
    console.log("Signature:", result.signature);
  };

  return (
    <div>
      {account?.isConnected ? (
        <button onClick={handleSign}>Sign Message</button>
      ) : (
        <button onClick={openModal}>Connect Wallet</button>
      )}
    </div>
  );
}