Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.getpara.com/llms.txt

Use this file to discover all available pages before exploring further.

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 @tanstack/react-query --save-exact

​
Provider Setup

To use Para’s React hooks, wrap your application with ParaProvider: 
import { ParaProvider } 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 />
      </ParaProvider>
    </QueryClientProvider>
  );
}
ParaProvider renders an embedded ParaModal by default. Do not also render a separate <ParaModal /> unless you set config={{ disableEmbeddedModal: true }} on the provider.
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

​
Authentication

​
Wallet Operations

​
Session Management

​
Utility Hooks

Utility hooks provide access to core functionality without React Query: