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

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

NameTypeDescription
childrenJSX.Element

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

Was this helpful?

Clerk © 2022