Rainbow logo
RainbowKit
2.2.0

カスタムアバター

カスタムアバター

アプリのユーザーアバターをカスタマイズする

デフォルトでは、ENS画像が設定されていない場合のユーザーのためにアバターを提供しますが、独自のアバターコンポーネントを提供することでこれをカスタマイズすることができます。 TypeScriptを使用している場合、AvatarComponentタイプをインポートすることができます:

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>
);
};

avatarプロップに渡されるAvatarComponentは、以下のプロップタイプを持っています: <{ address: string; ensImage?: string | null; size: number;}>