> ## 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.

# Frontend Integration

`near-kit` is designed to work seamlessly in browser environments. The logic for building transactions is identical to the server-side; the only difference is that signing is delegated to the user's wallet via an **Adapter**.

<Info>
  **New to React?** Check out [`@near-kit/react`](/react/overview) for ready-to-use hooks that handle loading states, error handling, and integrate with React Query or SWR.
</Info>

## 🚀 Live Demo

See `near-kit` running in a real React application using NEAR Connect.

* **Live App:** [guestbook.near.tools](https://guestbook.near.tools/)
* **Source Code:** [github.com/r-near/near-kit-guestbook-demo](https://github.com/r-near/near-kit-guestbook-demo)

***

## The Adapter Pattern

You initialize the `Near` instance with a `wallet` object instead of a private key.

```typescript theme={null}
const near = new Near({
  network: "testnet",
  wallet: fromHotConnect(connector), // <--- The Adapter
})
```

Once initialized, you use `near` exactly as you would in a backend script. When you call `.send()`, the library automatically triggers the wallet's popup for the user to approve the transaction.

## NEAR Connect

[NEAR Connect](https://github.com/azbang/near-connect) is the standard wallet connection library for the NEAR ecosystem.

### Setup

```typescript theme={null}
import { NearConnector } from "@hot-labs/near-connect"
import { Near, fromHotConnect } from "near-kit"

// 1. Initialize Connector
const connector = new NearConnector({ network: "testnet" })

// 2. Listen for Sign In
connector.on("wallet:signIn", async (data) => {
  // 3. Create Near Instance
  const near = new Near({
    network: "testnet",
    wallet: fromHotConnect(connector),
  })

  console.log("Connected!")
})

// Trigger connection
connector.connect()
```

## Best Practice: React Context

<Tip>
  For a more streamlined React experience with built-in hooks, see the [`@near-kit/react`](/react/overview) package which provides `NearProvider`, `useView`, `useCall`, and more.
</Tip>

In a React application, you should create a `WalletContext` to store the `Near` instance so it can be accessed by any component.

Here is a simplified pattern from the [Guestbook Demo](https://github.com/r-near/near-kit-guestbook-demo/blob/main/src/WalletProvider.tsx):

```jsx theme={null}
// WalletProvider.tsx
import { createContext, useContext, useEffect, useState } from "react"
import { Near, fromHotConnect } from "near-kit"
import { NearConnector } from "@hot-labs/near-connect"

const WalletContext = createContext<{ near: Near | null }>(null)

export const WalletProvider = ({ children }) => {
  const [near, setNear] = useState<Near | null>(null)

  useEffect(() => {
    const connector = new NearConnector({ network: "testnet" })

    connector.on("wallet:signIn", async () => {
      setNear(
        new Near({
          network: "testnet",
          wallet: fromHotConnect(connector),
        })
      )
    })

    connector.connect()
  }, [])

  return (
    <WalletContext.Provider value={{ near }}>{children}</WalletContext.Provider>
  )
}

// Use it in any component!
export const useWallet = () => useContext(WalletContext)
```