useClerk hook

The useClerk hook retrieves the Clerk object. It is most commonly used to build alternatives to Clerk's display components.

Usage

Use the useClerk hook to retrieve the Clerk object. If you only want information about the active user, use the useUser hook instead.

import { useClerk } from "@clerk/clerk-react";
const SignInButton = () => {
const clerk = useClerk();
return <button onClick={() => clerk.openSignIn({})}>Sign in</button>;
};

Alternates

If a hook is inconvenient, alternates patterns are available to retrieve the Clerk object.

WithClerk (Function-as-child)

Use the function-as-child pattern with WithClerk to retrieve the Clerk object within a class component.

import { WithClerk } from "@clerk/clerk-react";
class SignInButton extends React.Component {
render() {
return (
<WithClerk>
{(clerk) => (
<button onClick={() => clerk.openSignIn({})}>Sign in</button>
)}
</WithClerk>
);
}
}

withClerk (Higher-order component)

Use the withClerk higher-order component to pass the Clerk object as a prop to any component.

import { withClerk } from "@clerk/clerk-react";
class SignInButton extends React.Component {
render() {
return (
<button onClick={() => this.props.clerk.openSignIn({})}>Sign in</button>
);
}
}
const SignInButtonWithClerk = withClerk(SignInButton);

WithClerkProp Typescript utility

In Typescript, use with WithClerkProp utility type to make the compiler aware of the clerk prop.

import { withClerk, WithClerkProp } from "@clerk/clerk-react";
class SignInButton extends React.Component<WithClerkProp<{}>> {
render() {
return (
<button onClick={() => this.props.clerk.openSignUp({})}>Sign ins</button>
);
}
}
const SignInButtonWithClerk = withClerk(SignInButton);