> For the complete documentation index, see [llms.txt](https://txnlab.gitbook.io/use-wallet/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://txnlab.gitbook.io/use-wallet/framework/react.md).

# 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 adapters (see [Installation](/use-wallet/getting-started/installation.md)) and [configuring your WalletManager](/use-wallet/getting-started/configuration.md), wrap your application with the `WalletProvider`:

```tsx
import { WalletProvider, WalletManager } from '@txnlab/use-wallet-react'
import { pera } from '@txnlab/use-wallet-pera'
import { defly } from '@txnlab/use-wallet-defly'

// Create manager instance (see Configuration guide)
const manager = new WalletManager({
  wallets: [pera(), defly()],
  defaultNetwork: '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:

#### useWallet

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

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

function WalletInfo() {
  const { 
    wallets,             // All configured wallets
    availableWallets,    // Wallets available on the active network
    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](/use-wallet/api-reference/usewallet.md).

#### useNetwork

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

```tsx
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 enables users to switch between different networks.

Runtime node configuration enables users to override the application's default node settings and connect to any Algorand node. See the [Runtime Node Configuration](/use-wallet/guides/runtime-node-configuration.md) guide for details about implementing this feature.

For a complete list of all available properties and methods, see the [useNetwork API Reference](/use-wallet/api-reference/usenetwork.md).

### Next Steps

* Check out the [Connect Wallet Menu](/use-wallet/guides/connect-wallet-menu.md) guide for creating a simple wallet connection interface
* Learn about transaction signing patterns in the [Signing Transactions](/use-wallet/guides/signing-transactions.md) guide
* Explore network features in the [Switching Networks](/use-wallet/guides/switching-networks.md) and [Runtime Node Configuration](/use-wallet/guides/runtime-node-configuration.md) guides
* Read the [API Reference](/use-wallet/api-reference/usewallet.md) for detailed documentation of the library's main exports
* Browse [Example Projects](/use-wallet/resources/example-projects.md) for working implementations in Vite (React) and Next.js