Access the Clerk object inside your components.
useClerk hook accesses the Clerk object. It can be used to retrieve any object in the ClerkJS SDK. Moreover, it allows access to all of the Clerk object's methods, giving you the freedom to build alternatives to any Clerk Component.
This API is intended to be used for advanced use cases (eg: building a completely custom oauth flow) or as an escape hatch giving access to lower-level APIs.
There are a couple of alternative methods to retrieve the
Clerk object if you cannot use hooks.
Make sure you've followed the installation guide for Clerk React before running the snippets below.
An example of the
useClerk hook in action is shown below. We get access to the Clerk object in order to render a button that opens the sign in form as a modal. Note that if your component is not a descendant of the <ClerkProvider/> component, the
useClerk hook will throw an error.
Make sure you've followed the installation guide for Clerk React before running the snippets below.There are times where using a hook might be inconvenient. For such cases, there are alternative ways to get access to the Clerk object.
Clerk provides the <WithClerk/> component and the withClerk higher order component directive that will allow your wrapped components to get access to the
Clerk object will be accessible in the wrapped component under the
If you really want to stretch JSX capabilities and you cannot use the withClerk higher order component, we provide a
<WithClerk/> component that accepts a Function as a child. Inside this function, the Clerk object will be accessible.
If you're using Typescript, Clerk provides a
WithClerkProp type to make the compiler aware of the
clerk prop for your components.
The example below uses the
withClerk higher order component.