> ## Documentation Index
> Fetch the complete documentation index at: https://kit.near.tools/llms.txt
> Use this file to discover all available pages before exploring further.
# React Integration
> First-class React hooks for NEAR blockchain interactions
`@near-kit/react` provides thin, focused React hooks that wrap the core `near-kit` library. These hooks handle the React lifecycle for you while giving you full control over caching and data fetching strategies.
**Design Philosophy**: These hooks are intentionally thin wrappers. They manage loading states and errors, but don't include built-in caching. For production apps, we recommend pairing them with [React Query](/react/data-fetching#react-query) or [SWR](/react/data-fetching#swr).
## Installation
```bash npm theme={null}
npm install @near-kit/react
```
```bash bun theme={null}
bun add @near-kit/react
```
```bash yarn theme={null}
yarn add @near-kit/react
```
```bash pnpm theme={null}
pnpm add @near-kit/react
```
`@near-kit/react` includes `near-kit` as a dependency — both packages are versioned together.
## Quick Example
Here's a complete example showing provider setup, reading data, and sending transactions:
```tsx theme={null}
import { Near } from "near-kit"
import { NearProvider, useNear, useBalance, useSend } from "@near-kit/react"
// 1. Create the Near client
const near = new Near({
network: "testnet",
privateKey: "ed25519:...",
defaultSignerId: "alice.testnet",
})
// 2. Wrap your app with NearProvider
function App() {
return (
)
}
// 3. Use hooks in any component
function Wallet() {
const { data: balance, isLoading } = useBalance({ accountId: "alice.testnet" })
const { mutate: send, isPending } = useSend()
const handleSend = async () => {
await send("bob.testnet", "1 NEAR")
}
if (isLoading) return
Loading...
return (
Balance: {balance}
)
}
```
**For production apps with mutations**, we recommend using [React Query](/react/data-fetching#react-query) with `useNear()` for proper cache invalidation. The thin hooks above are great for prototyping but don't automatically refetch data after mutations.
## Available Hooks
Access the Near client instance from context
Call view methods on smart contracts
Get formatted account balance
Check if an account exists
Call contract methods that modify state
Send NEAR tokens to another account
Get full account details and access keys
Get a typed contract interface
## Hook Categories
These hooks fetch data from the blockchain. They return `{ data, error, isLoading, refetch }`.
```tsx theme={null}
// View method call
const { data: messages } = useView({
contractId: "guestbook.near",
method: "get_messages",
args: { limit: 10 },
})
// Account balance
const { data: balance } = useBalance({ accountId: "alice.near" })
// Account existence check
const { data: exists } = useAccountExists({ accountId: "bob.near" })
// Full account details (connected wallet account)
const { data: account } = useAccount()
```
These hooks modify blockchain state. They return `{ mutate, isPending, error, data, reset }`.
```tsx theme={null}
// Send tokens
const { mutate: send, isPending } = useSend()
await send("bob.near", "5 NEAR")
// Call contract method
const { mutate, isPending: isCallPending } = useCall({
contractId: "counter.near",
method: "increment",
})
await mutate({})
```
## What's Next?
Configure the NearProvider for your app
Complete API reference for all hooks
Integrate with React Query or SWR
Connect user wallets in the browser