Skip to main content

​
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

Hooks to access current the current Para instance account and wallet state. These hooks use the React Query useQuery hook and return the same structure as the React Query hooks.
​
State Hooks
object

​
Mutation Hooks

Hooks for performing actions and state changes in the Para instance. These hooks use the React Query useMutation hook and return the same structure as the React Query hooks (see the note below). NOTE Our hooks return mutation functions named specifically for their mutation action. For example,useCreateUser returns both createUserAsync and createUser rather than the mutateAsync and mutate functions that React Query returns, these functions are identical to their React Query counterparts.
​
Authentication
object
​
Wallet Operations
object

​
Utility Hooks

Hooks for retrieving and modifying application state. These hooks DO NOT incorporate or follow and React Query patterns.
​
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

EVM Wallets

Connect MetaMask, WalletConnect, and other EVM-compatible wallets with Para.
Solana Wallets

Solana Wallets

Integrate Phantom, Solflare, and other Solana wallets into your Para-powered dApp.
Cosmos Wallets

Cosmos Wallets

Connect Keplr and other Cosmos ecosystem wallets with Para applications.
⌘I