Component Reference <ClerkLoaded> <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.
app /layout.tsx 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.
app /page.tsx declare global {
interface Window {
Clerk : any ;
}
}
export default function Home () {
return < div >This page uses Clerk { window . Clerk .version}; </ div >;
}
pages /_app.tsx 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.
pages /index.tsx declare global {
interface Window {
Clerk : any ;
}
}
export default function Home () {
return < div >This page uses Clerk { window . Clerk .version}; </ div >;
}
app.tsx 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;
routes /index.tsx import { ClerkLoaded } from "@clerk/remix" ;
export default function Index () {
return (
< div >
< ClerkLoaded >
< div >Clerk is loaded</ div >
< p >window.Clerk.version</ p >
</ ClerkLoaded >
</ div >
);
}
Last updated on Aug 20, 2024