<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 publishableKey="clerk-pub-key">
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.

Name	Type	Description
children	JSX.Element	Pass any component or components and they will have access to the Clerk object.