Skip to content
Documentation
/
Hooks
/
useConnect

useConnect

Hook for connecting to configured connectors.

import { useConnect } from 'wagmi'

Usage

import { useConnect } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, connect] = useConnect()

  return (
    <>
      <div>Connected: {data.connected.toString()}</div>

      {data.connectors.map((x) => (
        <button key={x.name} onClick={() => connect(x)}>
          {x.name}
        </button>
      ))}
    </>
  )
}

Return Values

result

{
  data?: {
    connected: boolean
    connector: Connector
    connectors: Connector[]
  }
  error?: Error
  loading?: boolean
}

connect

(connector: Connector) => Promise<{
  data?: {
    account?: string
    chain?: { id: number; unsupported: boolean }
    provider?: Provider
  }
  error?: Error
}>