Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

<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.

This component only renders during client-side rendering (CSR only).

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.

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
}

Props

NameDescription
childrenJSX.Element - Pass any component or components and they will have access to the Clerk object.

Was this helpful?

Clerk © 2022