<ClerkLoaded>
The <ClerkLoaded>
component guarantees that the Clerk object has loaded and will be available under window.Clerk
. This allows you to wrap child components to access the Clerk
object without the need to check it exists.
Usage
import { ClerkProvider, ClerkLoaded, ClerkLoading } from '@clerk/nextjs'
import './globals.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<ClerkProvider>
<html lang="en">
<body>
<ClerkLoaded>
{children}
</ClerkLoaded>
</body>
</html>
</ClerkProvider>
)
}
Once you have wrapped your app with <ClerkLoaded>
, you can access the Clerk
object without the need to check if it exists.
declare global {
interface Window {
Clerk: any;
}
}
export default function Home() {
return <div>This page uses Clerk {window.Clerk.version}; </div>;
}
import "@/styles/globals.css";
import { ClerkLoaded, ClerkProvider } from "@clerk/nextjs";
import { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
return (
<ClerkProvider {...pageProps}>
<ClerkLoaded>
<Component {...pageProps} />
</ClerkLoaded>
</ClerkProvider>
);
}
export default MyApp;
Once you have wrapped your app with <ClerkLoaded>
, you can access the Clerk
object without the need to check if it exists.
declare global {
interface Window {
Clerk: any;
}
}
export default function Home() {
return <div>This page uses Clerk {window.Clerk.version}; </div>;
}
import { useEffect } from "react";
import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-react";
declare global {
interface Window {
Clerk: any;
}
}
function App() {
return (
<ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
<ClerkLoaded>
<Page />
</ClerkLoaded>
</ClerkProvider>
);
}
function Page() {
useEffect(() => {
// no need to check if window.Clerk exists
document.title = "This page uses Clerk " +
window.Clerk.version;
}, []);
return (
<div>The content </div>
);
}
export default App;
import { ClerkLoaded } from "@clerk/remix";
export default function Index() {
return (
<div>
<ClerkLoaded>
<div>Clerk is loaded</div>
<p>window.Clerk.version</p>
</ClerkLoaded>
</div>
);
}
Feedback
Last updated on