---
title: How to Connect a Wallet with React
description:
  "Every application on Solana requires a connection with a user's wallet to
  use. Learn how to connect to wallets on Solana."
---

Solana's [wallet-adapter](https://github.com/anza-xyz/wallet-adapter) library
makes it easy to manage wallet connections client-side. For a full length guide,
check out
[Add Solana Wallet Adapter to a NextJS application](/developers/guides/wallets/add-solana-wallet-adapter-to-nextjs).

> For web3.js v2, please reference the
> [react example](https://github.com/solana-labs/solana-web3.js/tree/master/examples/react-app)
> from the
> [Anza Web3js v2 Blog](https://www.anza.xyz/blog/solana-web3-js-2-release).

## How to Connect to a Wallet with React

> Currently, `create-solana-dapp` only works with Solana Web3.js v1.

For quick setup with React use:

```bash
npx create-solana-dapp <app-name>
```

For manual setup, run the following command to install the required
dependencies:

```bash
npm install --save \
    @solana/wallet-adapter-base \
    @solana/wallet-adapter-react \
    @solana/wallet-adapter-react-ui \
    @solana/wallet-adapter-wallets \
    @solana/web3.js@1 \
    react
```

The `WalletProvider` can than be setup to connect to a user's wallet and later
send transactions.

```typescript
import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
    WalletModalProvider,
    WalletDisconnectButton,
    WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
    // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
    const network = WalletAdapterNetwork.Devnet;

    // You can also provide a custom RPC endpoint.
    const endpoint = useMemo(() => clusterApiUrl(network), [network]);

    const wallets = useMemo(
        () => [
            new UnsafeBurnerWalletAdapter(),
        ],
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [network]
    );

    return (
        <ConnectionProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets} autoConnect>
                <WalletModalProvider>
                    <WalletMultiButton />
                    <WalletDisconnectButton />
                    { /* Your app's components go here, nested within the context providers. */ }
                </WalletModalProvider>
            </WalletProvider>
        </ConnectionProvider>
    );
};
```
