feat: always call ConnectButton.Custom render function (#219)

.changeset/nine-baboons-wash.md

@@ -0,0 +1,30 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+`ConnectButton.Custom` no longer renders `null` when unmounted.
+
+In order to support custom loading indicators and/or hooks in your render function, `ConnectButton.Custom` no longer renders `null` internally before mount.
+
+**Migration guide**
+
+If you wish to maintain the existing behavior, a new `mounted` boolean is passed to your render function which allows you to render `null` manually when `mounted` is `false`.
+
+```diff
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+
+export default () => (
+  <ConnectButton.Custom>
+    {({
++      mounted,
+      ...etc,
+      }) => {
++        if (!mounted) {
++          return null;
++        }
+
+        return <button>...</button>;
+      }}
+  </ConnectButton.Custom>
+);
+```

README.md

@@ -294,8 +294,13 @@ export const YourApp = () => {
           openAccountModal,
           openChainModal,
           openConnectModal,
-        }) =>
-          !account ? (
+          mounted,
+        }) => {
+          if (!mounted) {
+            return null;
+          }
+
+          return !account ? (
             <button onClick={openConnectModal} type="button">
               Connect Wallet
             </button>
@@ -336,8 +341,8 @@ export const YourApp = () => {
                 {account.displayBalance ? ` (${account.displayBalance})` : ''}
               </button>
             </div>
-          )
-        }
+          );
+        }}
       </ConnectButton.Custom>
     </>
   );
@@ -486,6 +491,11 @@ The following props are passed to your render function.
       <td><code>boolean</code></td>
       <td>Boolean indicating whether the account modal is open</td>
     </tr>
+    <tr>
+      <td><code>mounted</code></td>
+      <td><code>boolean</code></td>
+      <td>Boolean indicating whether the component has mounted</td>
+    </tr>
     <tr>
       <td><code>chainModalOpen</code></td>
       <td><code>boolean</code></td>

packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx

@@ -31,10 +31,15 @@ export function ConnectButton({
       {({
         account,
         chain,
+        mounted,
         openAccountModal,
         openChainModal,
         openConnectModal,
       }) => {
+        if (!mounted) {
+          return null;
+        }
+
         return account ? (
           <Box display="flex" gap="12">
             {chain && (

packages/rainbowkit/src/components/ConnectButton/ConnectButtonRenderer.tsx

@@ -41,6 +41,7 @@ export interface ConnectButtonRendererProps {
       name?: string;
       unsupported?: boolean;
     };
+    mounted: boolean;
     openAccountModal: () => void;
     openChainModal: () => void;
     openConnectModal: () => void;
@@ -53,7 +54,7 @@ export interface ConnectButtonRendererProps {
 export function ConnectButtonRenderer({
   children,
 }: ConnectButtonRendererProps) {
-  const isMounted = useIsMounted();
+  const mounted = useIsMounted();
 
   const [{ data: accountData }, disconnect] = useAccount({
     fetchEns: true,
@@ -116,10 +117,6 @@ export function ConnectButtonRenderer({
     preloadImages();
   }, [preloadImages]);
 
-  if (!isMounted) {
-    return null;
-  }
-
   const displayBalance = balanceData
     ? `${Number(balanceData.formatted).toPrecision(3)} ${balanceData.symbol}`
     : undefined;
@@ -153,6 +150,7 @@ export function ConnectButtonRenderer({
           : undefined,
         chainModalOpen,
         connectModalOpen,
+        mounted,
         openAccountModal,
         openChainModal,
         openConnectModal,