Search…
<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
1
import { useEffect } from "react";
2
import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-react";
3
4
function App() {
5
return (
6
<ClerkProvider frontendApi="clerk.[your-domain].com">
7
<ClerkLoaded>
8
<Page />
9
</ClerkLoaded>
10
</ClerkProvider>
11
);
12
}
13
14
function Page() {
15
useEffect(() => {
16
// No need to check if the
17
// Clerk object exists.
18
document.title = "This page uses Clerk " +
19
document.window.Clerk.version;
20
}, []);
21
22
return (
23
<div>The content</div>
24
);
25
}
Copied!

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.
Last modified 3mo ago
Copy link
Edit on GitHub