Avatars personnalisés

Personnalisation de l’avatar utilisateur de votre application

Par défaut, nous fournissons un avatar pour les utilisateurs si leur image ENS n'est pas définie, mais vous pouvez personnaliser cela en fournissant votre propre composant avatar. Vous pouvez importer le type AvatarComponent si vous utilisez TypeScript :

import {
  RainbowKitProvider,
  AvatarComponent,
} from '@rainbow-me/rainbowkit';
import { generateColorFromAddress } from './utils';

const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
  const color = generateColorFromAddress(address);
  return ensImage ? (
    <img
      src={ensImage}
      width={size}
      height={size}
      style={{ borderRadius: 999 }}
    />
  ) : (
    <div
      style={{
        backgroundColor: color,
        borderRadius: 999,
        height: size,
        width: size,
      }}
    >
      :^)
    </div>
  );
};

const App = () => {
  return (
    <RainbowKitProvider avatar={CustomAvatar} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};

Le AvatarComponent passé à la prop avatar a des types de prop comme suit : <{ address: string; ensImage?: string | null; size: number;}>

Aperçu

Prise en main

Avancé

Avatars personnalisés

Personnalisation de l’avatar utilisateur de votre application