1---
2title: React Hooks Reference
3description: Low-level wallet hooks from @solana/react for wallet selection, signing, and transaction sending in React apps.
4---
5 
6# Solana Kit React Reference
7 
8`@solana/react` provides low-level wallet hooks for Solana Kit.
9 
10## Setup
11 
12```tsx
13import {
14  SelectedWalletAccountContextProvider,
15  useSelectedWalletAccount,
16  useSignAndSendTransaction,
17} from '@solana/react';
18```
19 
20## Provider
21 
22```tsx
23const STORAGE_KEY = 'wallet-account';
24 
25function App() {
26  return (
27    <SelectedWalletAccountContextProvider
28      filterWallet={(wallet) => wallet.accounts.length > 0}
29      stateSync={{
30        getSelectedWallet: () => localStorage.getItem(STORAGE_KEY),
31        storeSelectedWallet: (k) => localStorage.setItem(STORAGE_KEY, k),
32        deleteSelectedWallet: () => localStorage.removeItem(STORAGE_KEY),
33      }}
34    >
35      <YourApp />
36    </SelectedWalletAccountContextProvider>
37  );
38}
39```
40 
41## Wallet Selection
42 
43```tsx
44function WalletSelector() {
45  const [account, setAccount, wallets] = useSelectedWalletAccount();
46 
47  if (!account) {
48    return (
49      <div>
50        {wallets.map((wallet) => (
51          <div key={wallet.name}>
52            {wallet.accounts.map((acc) => (
53              <button key={acc.address} onClick={() => setAccount(acc)}>
54                {wallet.name}: {acc.address.slice(0, 8)}...
55              </button>
56            ))}
57          </div>
58        ))}
59      </div>
60    );
61  }
62 
63  return (
64    <div>
65      <p>Connected: {account.address}</p>
66      <button onClick={() => setAccount(undefined)}>Disconnect</button>
67    </div>
68  );
69}
70```
71 
72## Sign In With Solana
73 
74```tsx
75const signIn = useSignIn(wallet);
76 
77const handleSignIn = async () => {
78  const { account, signedMessage, signature } = await signIn({
79    requestId: csrfToken,
80  });
81  // Verify on server
82};
83```
84 
85## Sign Message
86 
87```tsx
88const signMessage = useSignMessage(account);
89 
90const { signature, signedMessage } = await signMessage({
91  message: new TextEncoder().encode('Hello'),
92});
93```
94 
95## Sign Transaction
96 
97```tsx
98const signTx = useSignTransaction(account, 'solana:devnet');
99 
100const { signedTransaction } = await signTx({
101  transaction: txBytes,
102  options: { minContextSlot },
103});
104```
105 
106## Sign & Send
107 
108```tsx
109const signAndSend = useSignAndSendTransaction(account, 'solana:devnet');
110 
111const { signature } = await signAndSend({ transaction: txBytes });
112const base58Sig = getBase58Decoder().decode(signature);
113```
114 
115## Transaction Signer Hook
116 
117```tsx
118const signer = useWalletAccountTransactionSendingSigner(account, 'solana:devnet');
119 
120const message = pipe(
121  createTransactionMessage({ version: 0 }),
122  m => setTransactionMessageFeePayerSigner(signer, m),
123  m => setTransactionMessageLifetimeUsingBlockhash(blockhash, m),
124  m => appendTransactionMessageInstruction(instruction, m),
125);
126 
127const sig = await signAndSendTransactionMessageWithSigners(message);
128```
129 
130## Chain Identifiers
131 
132```ts
133'solana:mainnet'
134'solana:devnet'
135'solana:testnet'
136'solana:localnet'
137```
138 
139## Signer Types
140 
141| Hook | Returns |
142|------|---------|
143| `useWalletAccountMessageSigner` | `MessageModifyingSigner` |
144| `useWalletAccountTransactionSigner` | `TransactionModifyingSigner` |
145| `useWalletAccountTransactionSendingSigner` | `TransactionSendingSigner` |
146 
147All return modifying signers (wallets may modify before signing).
148 
149## Complete Example
150 
151```tsx
152function App() {
153  return (
154    <SelectedWalletAccountContextProvider
155      filterWallet={(w) => w.accounts.length > 0}
156      stateSync={{
157        getSelectedWallet: () => localStorage.getItem('wallet'),
158        storeSelectedWallet: (k) => localStorage.setItem('wallet', k),
159        deleteSelectedWallet: () => localStorage.removeItem('wallet'),
160      }}
161    >
162      <WalletApp />
163    </SelectedWalletAccountContextProvider>
164  );
165}
166 
167function WalletApp() {
168  const [account, setAccount, wallets] = useSelectedWalletAccount();
169  const signAndSend = useSignAndSendTransaction(account, 'solana:devnet');
170 
171  if (!account) {
172    return wallets.map((w) =>
173      w.accounts.map((a) => (
174        <button key={a.address} onClick={() => setAccount(a)}>
175          {w.name}: {a.address.slice(0, 8)}...
176        </button>
177      ))
178    );
179  }
180 
181  return (
182    <div>
183      <p>{account.address}</p>
184      <button onClick={() => setAccount(undefined)}>Disconnect</button>
185    </div>
186  );
187}
188```