react.md

layout
title description tableOfContents outline pagination visible true visible visible true visible true visible true

React

The React adapter (@txnlab/use-wallet-react) provides a set of hooks and components for integrating use-wallet into React applications. This guide covers how to set up the adapter and use its features effectively.

Setup

After installing the package and any required wallet dependencies (see Installation) and configuring your WalletManager, wrap your application with the WalletProvider:

import {
  WalletProvider,
  WalletManager,
  NetworkId,
} from '@txnlab/use-wallet-react'

// Create manager instance (see Configuration guide)
const manager = new WalletManager({
  wallets: [...],
  networks: {...},
  defaultNetwork: NetworkId.TESTNET // or just 'testnet'
})

function App() {
  return (
    <WalletProvider manager={manager}>
      <YourApp />
    </WalletProvider>
  )
}

The provider makes the wallet functionality available throughout your application via React hooks.

Using the Hooks

The React adapter provides two hooks for accessing wallet functionality. In v4.0.0, network-related features were moved from useWallet into a new useNetwork hook to provide better separation of concerns:

useWallet

The useWallet hook provides access to wallet management features. Here's an example showing some commonly used values:

import { useWallet } from '@txnlab/use-wallet-react'

function WalletInfo() {
  const { 
    wallets,             // List of available wallets
    activeWallet,        // Currently active wallet
    activeAddress,       // Address of active account
    isReady,             // Whether all wallet providers have finished initialization
    signTransactions,    // Function to sign transactions
    transactionSigner,   // Typed signer for ATC and Algokit Utils
    algodClient          // Algod client for active network
  } = useWallet()

  // Checking isReady is important, especially in SSR environments
  // to prevent hydration errors
  if (!isReady) {
    return <div>Loading...</div>
  }

  return (
    <div>
      {activeAddress ? (
        <div>Connected: {activeAddress}</div>
      ) : (
        <div>Not connected</div>
      )}
    </div>
  )
}

For a complete list of all available properties and methods, see the useWallet API Reference.

useNetwork

The useNetwork hook serves two primary functions: managing the active network and supporting runtime node configuration.

import { useNetwork } from '@txnlab/use-wallet-react'

function NetworkSelector() {
  const {
    // Active network management
    activeNetwork,         // Currently active network
    setActiveNetwork,      // Function to change networks
    
    // Runtime node configuration
    networkConfig,         // Complete configuration for all networks
    activeNetworkConfig,   // Configuration for active network only
    updateAlgodConfig,     // Update a network's Algod configuration
    resetNetworkConfig     // Reset network config to initial values
  } = useNetwork()

  return (
    <div>
      {/* Example: Network selector dropdown */}
      <select
        value={activeNetwork}
        onChange={(e) => setActiveNetwork(e.target.value)}
      >
        {Object.keys(networkConfig).map((networkId) => (
          <option key={networkId} value={networkId}>
            {networkId}
          </option>
        ))}
      </select>
    </div>
  )
}

Active network management (previously part of useWallet) enables users to switch between different networks.

Runtime node configuration, introduced in v4.0.0, enables users to override the application's default node settings and connect to any Algorand node. See the Runtime Node Configuration guide for details about implementing this feature.

For a complete list of all available properties and methods, see the useNetwork API Reference.

Next Steps

• Check out the Connect Wallet Menu guide for creating a simple wallet connection interface
• Learn about transaction signing patterns in the Signing Transactions guide
• Explore network features in the Switching Networks and Runtime Node Configuration guides
• Read the API Reference for detailed documentation of the library's main exports
• Browse Example Projects for working implementations in Vite (React) and Next.js