<ClerkLoaded>

Guarantee that the Clerk object exists.

Overview

The <ClerkLoaded> component guarantees that the Clerk object has loaded and will be available under window.Clerk.

It essentially provides a wrapper, enabling child components to access the Clerk object without the need to check if it exists.

Usage

Make sure you've followed the installation guide for Clerk React before running the snippets below.

Rendering the <ClerkLoaded/> component allows immediate access to the Clerk object without the need to check if it exists.

Clerk React
Clerk React
import { useEffect } from "react";
import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-react";
function App() {
return (
<ClerkProvider frontendApi="clerk.[your-domain].com">
<ClerkLoaded>
<Page />
</ClerkLoaded>
</ClerkProvider>
);
}
function Page() {
useEffect(() => {
// No need to check if the
// Clerk object exists.
document.title = "This page uses Clerk " +
document.window.Clerk.version;
}, []);
return (
<div>The content</div>
);
}

Props

This component accepts no props, apart from any child components that will be able to safely access the Clerk object.

Name

Description

children

JSX.Element

Pass any component or components and they will have access to the Clerk object.