Skip to main content

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.

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.
New to React? Check out @near-kit/react for ready-to-use hooks that handle loading states, error handling, and integrate with React Query or SWR.

​
🚀 Live Demo

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

​
The Adapter Pattern

You initialize the Near instance with a wallet object instead of a private key. 
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 is the standard wallet connection library for the NEAR ecosystem.

​
Setup

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

For a more streamlined React experience with built-in hooks, see the @near-kit/react package which provides NearProvider, useView, useCall, and more.
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: 
// 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)