ConnectButton

ConnectButton

ConnectButton का उपयोग करना और अनुकूलित करना

यह मुख्य घटक है। यह connect/disconnect बटन को रेंडर करने के लिए ज़िम्मेदार है, साथ ही साथ chain-swapping UI का भी।

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

नोट: सुनिश्चित करें कि आपका ऐप आवश्यक प्रदाताओं में लिपटा हुआ है। अधिक पढ़ें.

ConnectButton घटक कई प्रॉप्स को उजागर करता है जिससे उसकी उपस्थिति को अनुकूलित किया जा सकता है, जिसमें विभिन्न तत्वों की दृश्यता को टॉगल करना शामिल है।

नोट: अंतर्निहित largeScreen ब्रेकपॉइंट 768px है।

कस्टम ConnectButton टेक्स्ट सेट करने के लिए label प्रॉप का उपयोग करें।

<ConnectButton label="Sign in" />

यहाँ accountStatus प्रॉप का उपयोग करने के कुछ अलग-अलग तरीके हैं।

केवल खाते का अवतार दिखाएँ।

<ConnectButton accountStatus="avatar" />

केवल खाते का पता दिखाएँ।

<ConnectButton accountStatus="address" />

यहाँ chainStatus प्रॉप का उपयोग करने के कुछ अलग-अलग तरीके हैं।

केवल वर्तमान चैन का आइकॉन दिखाएँ।

<ConnectButton chainStatus="icon" />

केवल वर्तमान चैन का नाम दिखाएँ।

<ConnectButton chainStatus="name" />

चैन UI को पूरी तरह से छिपाएँ।

<ConnectButton chainStatus="none" />

शेष राशि को छिपाने/दिखाने के लिए showBalance प्रॉप का उपयोग करें।

शेष राशि को छिपाएँ।

<ConnectButton showBalance={false} />

इन प्रॉप्स को रेस्पोंसिव प्रारूप में भी परिभाषित किया जा सकता है।

छोटी स्क्रीन पर, केवल खाता आइकन दिखाएँ। लेकिन बड़ी स्क्रीन पर, आइकन और पता दोनों दिखाएँ।

<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>

छोटी स्क्रीन पर, शेष राशि छिपाएँ। लेकिन बड़ी स्क्रीन पर, इसे दिखाएँ।

<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>