Docs
/Hooks
/useConnect
useConnect
Hook for connecting to account with configured connectors.
import { useConnect } from 'wagmi'
Usage
import { useConnect } from 'wagmi'
function App() {
const {
activeConnector,
connect,
connectors,
error,
isConnecting,
pendingConnector,
} = useConnect()
return (
<>
{activeConnector && <div>Connected to {activeConnector.name}</div>}
{connectors.map((x) => (
<button disabled={x.ready} key={x.id} onClick={() => connect(x)}>
{x.name}
{isConnecting && pendingConnector.id === x.id && ' (connecting)'}
</button>
))}
{error && <div>{error.message}</div>}
</>
)
}
Return Values
{
activeConnector: Connector
connect: (connector) => void
connectAsync: (connector) => Promise<{
address: string
chain: {
id: number
unsupported: boolean
}
connector: Connector
provider: Provider
}>
connectors: Connector[]
data?: {
address: string
chain: {
id: number
unsupported: boolean
}
connector: Connector
provider: Provider
}
error?: Error
isConnected: boolean
isConnecting: boolean
isDisconnected: boolean
isIdle: boolean
isReconnecting: boolean
pendingConnector: Connector
status:
| 'error'
| 'idle'
| 'connected'
| 'connecting'
| 'disconnected'
| 'reconnecting'
}
Configuration
connector (optional)
Connector to use for connecting wallet. Useful if you want to connect to a specific connector, instead of displaying a list.
import { useConnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
function App() {
const connect = useConnect({
connector: new InjectedConnector(),
})
}
onBeforeConnect (optional)
Function to invoke before connect and is passed same variables connect function would receive. Value returned from this function will be passed to both onError
and onSettled
functions in event of a connect failure.
import { useConnect } from 'wagmi'
function App() {
const connect = useConnect({
onBeforeConnect(connector) {
console.log('Before Connect', connector)
},
})
}
onConnect (optional)
Function to invoke when connect is successful.
import { useConnect } from 'wagmi'
function App() {
const connect = useConnect({
onConnect(data) {
console.log('Connect', data)
},
})
}
onError (optional)
Function to invoke when an error is thrown while connecting.
import { useConnect } from 'wagmi'
function App() {
const connect = useConnect({
onError(error) {
console.log('Error', error)
},
})
}
onSettled (optional)
Function to invoke when connect is settled (either successfully connected, or an error has thrown).
import { useConnect } from 'wagmi'
function App() {
const connect = useConnect({
onSettled(data, error) {
console.log('Settled', { data, error })
},
})
}