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.

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.

Live App: guestbook.near.tools
Source Code: 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.

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)

Getting Started

Essentials

React

Building dApps

Advanced

Reference

Frontend Integration

🚀 Live Demo

The Adapter Pattern

NEAR Connect

Setup

Best Practice: React Context

​🚀 Live Demo

​The Adapter Pattern

​NEAR Connect

​Setup

​Best Practice: React Context

🚀 Live Demo

The Adapter Pattern

NEAR Connect

Setup

Best Practice: React Context