The ParaProvider component wraps your React application to provide access to Para hooks and manage the SDK instance.

​
Import

import { ParaProvider } from "@getpara/react-sdk@alpha";

​
Usage

import { 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={{
          apiKey: "your-api-key",
        }}>
        <YourApp />
        <ParaModal />
      </ParaProvider>
    </QueryClientProvider>
  );
}

​
Advanced Usage

​
With Event Callbacks

function AppWithCallbacks() {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: process.env.REACT_APP_PARA_API_KEY,
        }}
        callbacks={{
          onLogin: (event) => {
            console.log("User logged in:", event.detail.data);
            navigate("/dashboard");
          },
          onLogout: (event) => {
            console.log("User logged out");
            clearUserData();
            navigate("/");
          },
          onWalletCreated: (event) => {
            console.log("New wallet:", event.detail.data);
            toast.success("Wallet created successfully!");
          },
          onSignMessage: (event) => {
            console.log("Message signed:", event.detail.data);
            analytics.track("message_signed", {
              walletType: event.detail.data.walletType
            });
          }
        }}>
        <YourApp />
        <ParaModal />
      </ParaProvider>
    </QueryClientProvider>
  );
}

​
With Custom Para Instance

This can be useful if you need to use the Para instance outside of the React tree, i.e. in the callbacks on the ParaProvider. 
function AppWithCustomClient() {
  const paraClient = useMemo(() => {
    return new ParaWeb("your-api-key", {
      debugMode: true,
      customHeaders: {
        "X-Custom-Header": "value"
      }
    });
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={paraClient}
        {/* Optional additional ParaProvider config */}
        config={{
          disableAutoSessionKeepAlive: false
        }}>
        <YourApp />
        <ParaModal />
      </ParaProvider>
    </QueryClientProvider>
  );
}

​
Notes

  • The ParaProvider must wrap any components that use Para hooks
  • It requires QueryClientProvider from React Query as a parent
  • The ParaModal component should be placed inside the provider
  • Event callbacks receive events with a detail property containing data and optional error
  • The provider automatically manages session keep-alive unless disabled
  • All child components can access Para hooks without additional setup