useAvatars

The useAvatars hook is used to get multiple avatar image URLs from an onchain identity provider for an array of ENS names or Basenames in a single batch request.

It is implemented with useQuery from @tanstack/react-query, and returns a UseQueryResult object, allowing you to pass through all @tanstack/react-query options.

Usage

Get avatars for multiple ENS names:

code

import { useAvatars } from '@coinbase/onchainkit/identity';

const ensNames = ['vitalik.eth', 'paulcramer.eth'];
const { data: avatars, isLoading } = useAvatars({ ensNames });

Get avatars for multiple Basenames:

code

import { useAvatars } from '@coinbase/onchainkit/identity';
import { base } from 'viem/chains';

const ensNames = ['paul.base.eth', 'coinbase.base.eth'];
const { data: avatars, isLoading } = useAvatars({ ensNames, chain: base });

Returns

useQuery<Promise<GetAvatarReturnType[]>>

type GetAvatarReturnType = string | null;

Parameters

UseAvatarsParams

type UseAvatarsParams = {
  /** Array of ENS names to resolve avatars for */
  ensNames: string[];
  /** Optional chain for domain resolution */
  chain?: Chain;
};

UseQueryOptions

type UseQueryOptions<TData = unknown> = Omit<
  TanstackUseQueryOptions<TData>,
  'queryKey' | 'queryFn'
>;