ParaProvider

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

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

<ParaProvider
  paraClientConfig={{ apiKey: "your-api-key" }}
  config={{ appName: "My App" }}
  paraModalConfig={modalOptions}
>
  <YourApp />
</ParaProvider>

<ParaProvider
  paraClientConfig={{ apiKey: "your-api-key" }}
  config={{
    appName: "My App",
    disableEmbeddedModal: true,
  }}
>
  <YourApp />
  <ParaModal {...modalOptions} />
</ParaProvider>

<ParaProvider
  paraClientConfig={{ apiKey: "your-api-key" }}
  config={{ appName: "My App" }}
  fallback={<LoadingSpinner />}
>
  <YourApp />
</ParaProvider>

<ParaProvider
  paraClientConfig={{ apiKey: "your-api-key" }}
  config={{ appName: "My App" }}
  waitForReady={false}
>
  <YourApp />
</ParaProvider>

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

function YourApp() {
  const { isReady } = useParaStatus();

  if (!isReady) return <LoadingSpinner />;
  return <Dashboard />;
}

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 />
      </ParaProvider>
    </QueryClientProvider>
  );
}

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 />
      </ParaProvider>
    </QueryClientProvider>
  );
}