Skip to main content
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 --save-exact

​
Provider Setup

To use Para’s React hooks, wrap your application with ParaProvider: 
import { ParaProvider, ParaModal } from "@getpara/react-sdk";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: "beta_YOUR_API_KEY_HERE",
        }}>
        <YourApp />
        <ParaModal />
      </ParaProvider>
    </QueryClientProvider>
  );
}
If you’re using a legacy API key (one without an environment prefix) you must provide a value to the paraClientConfig.environment. You can retrieve your updated API key from the Para Developer Portal at https://developer.getpara.com/

​
Quick Example

Here’s a simple example using multiple hooks together: 
import { useAccount, useWallet, useSignMessage, useModal } from "@getpara/react-sdk";

function WalletComponent() {
  const 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>
  );
}

​
Hooks

useAccount

useWallet

useWalletBalance

​
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