> ## 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.
# React Hooks
> State management and SDK interactions using Para's React hooks
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:
```bash theme={null}
npm install @getpara/react-sdk @tanstack/react-query --save-exact
```
## Provider Setup
To use Para's React hooks, wrap your application with `ParaProvider`:
```tsx theme={null}
import { ParaProvider } from "@getpara/react-sdk";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();
function App() {
return (
);
}
```
`ParaProvider` renders an embedded `ParaModal` by default. Do not also render a separate `` 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/](https://developer.getpara.com/)
## Quick Example
Here's a simple example using multiple hooks together:
```tsx theme={null}
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 (
{account?.isConnected ? (
) : (
)}
);
}
```
## Hooks
#### Authentication
#### Wallet Operations
#### Session Management
#### Utility Hooks
Utility hooks provide access to core functionality without React Query: