​
Overview

Para’s React hooks provide an intuitive way to manage wallet state, handle transactions, and interact with the Para SDK. This guide assumes you’ve already set up the Para Modal in your application following one of our framework integration guides.

​
Setting Up the Provider

To use Para’s React hooks, wrap your application with ParaProvider. This provider gives your components access to Para’s hooks and state management.

import { Environment, 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={{
          env: Environment.DEV,
          apiKey: "your-api-key",
        }}
        callbacks={{
          onLogout: (event) => console.log("Logout:", event.detail),
          onLogin: (event) => console.log("Login:", event.detail),
          onSignMessage: (event) => console.log("Message Signed:", event.detail),
        }}>
        <YourApp />
        <ParaModal /> // The provider wraps the modal
      </ParaProvider>
    </QueryClientProvider>
  );
}

​
Provider Configuration

​
ParaProvider Props
component

​
Using the Hooks

Here’s an example component using Para’s React hooks to handle wallet connection and message signing:

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

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

  const [message, setMessage] = useState("");
  const [messageSignature, setMessageSignature] = useState();

  const handleSign = async () => {
    if (!wallet || !message) return;

    const signatureRes = await signMessageAsync({
      messageBase64: Buffer.from(message).toString("base64"),
    });

    if (!("pendingTransactionId" in signatureRes) && signatureRes.signature) {
      setMessageSignature(signatureRes.signature);
    }
  };

  return (
    <div>
      <span>
        Connected Wallet:
        {account?.isConnected
          ? wallet
            ? para.getDisplayAddress(wallet.id, { truncate: true, addressType: wallet.type })
            : "No Wallet Selected"
          : "Not Connected"}
      </span>

      {account?.isConnected && (
        <>
          <input
            placeholder="Message to sign"
            onChange={(e) => setMessage(e.target.value ?? "")}
          />
          {messageSignature && <span>Signature: {messageSignature}</span>}
          <button
            disabled={!message}
            onClick={handleSign}>
            Sign Message
          </button>
        </>
      )}

      <button onClick={openModal}>{account?.isConnected ? "Open Modal" : "Login"}</button>
    </div>
  );
}

​
Available Hooks

​
Query Hooks

State management hooks built on React Query:

​
State Hooks
object

​
Mutation Hooks

Hooks for performing actions and state changes:

​
Authentication
object
​
Wallet Operations
object

​
Utility Hooks

​
Utilities
object

​
Advanced Usage

​
Using Para with EVM Providers

The ParaProvider can work with our External Wallet Connectors to provide wallet connection. An example using our Para EVM Provider is shown below:

import { Environment, ParaProvider, ParaEvmProvider } from "@getpara/react-sdk";
import { metaMaskWallet } from "@getpara/evm-wallet-connectors";
import { sepolia } from "wagmi/chains";

function App() {
  return (
    <ParaProvider
      paraClientConfig={{
        env: Environment.DEV,
        apiKey: "your-api-key",
      }}>
      <ParaEvmProvider
        config={{
          projectId: "your-walletconnect-project-id",
          appName: "Your App",
          chains: [sepolia],
          wallets: [metaMaskWallet],
        }}>
        <YourApp />
      </ParaEvmProvider>
    </ParaProvider>
  );
}

For more details on using external wallet connectors visit any of the external wallet integration guides:

EVM Wallets

Connect and authenticate with MetaMask, WalletConnect, and other EVM wallets

Solana Wallets

Integrate with Phantom, Backpack, and other Solana wallets

Cosmos Wallets

Support Keplr, Leap, and other Cosmos ecosystem wallets

​
Next Steps

Now that you understand Para’s React hooks, you can:

  • Implement wallet connection flows
  • Add transaction signing
  • Handle user authentication
  • Manage wallet state across your app