Rainbow logo
RainbowKit
2.2.10

कस्टम अवतार

कस्टम अवतार

अपने ऐप के उपयोगकर्ता अवतार को कस्टमाइज़ करना

डिफ़ॉल्ट रूप से, हम उपयोगकर्ताओं के लिए एक अवतार प्रदान करते हैं यदि उनका 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>
);
};

AvatarComponent जो avatar प्रॉप को पास किया गया है, उसका प्रॉप प्रकार निम्नलिखित है: <{ पता: स्ट्रिंग; ensImage?: स्ट्रिंग | null; आकार: संख्या;}>