Skip to content
Documentation
/
Hooks
/
useEnsAvatar

useEnsAvatar

Hook for fetching ENS avatar for address or ENS name.

import { useEnsAvatar } from 'wagmi'

Usage

import { useEnsAvatar } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, getEnsAvatar] = useEnsAvatar({
    addressOrName: 'awkweb.eth',
  })

  if (loading) return <div>Fetching avatar…</div>
  if (error || !data) return <div>Error fetching avatar</div>
  return <img src={data} />
}

Return Values

result

{
  data?: string
  error?: Error
  loading?: boolean
}

getEnsAvatar

(config?: {
  addressOrName: string
}) => Promise<{ data?: string; error?: Error }>

Configuration

addressOrName (optional)

Address or ENS name to fetch avatar.

import { useEnsAvatar } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, getEnsAvatar] = useEnsAvatar({
    addressOrName: 'awkweb.eth',
  })

  return ...
}

skip (optional)

Skips automatically fetching data on mount. Defaults to false. Useful if you want to call getAvatar manually at some other point.

import { useEnsAvatar } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, getEnsAvatar] = useEnsAvatar({
    skip: true,
  })

  return ...
}
useContractWrite
useEnsLookup