<UserAvatar /> component
The <UserAvatar /> component renders the authenticated user's avatar on its own, a common UI element found across many websites and applications.
Usage with JavaScript
The following methods available on an instance of the Clerk class are used to render and control the <UserAvatar /> component:
The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.
mountUserAvatar()
Render the <UserAvatar /> component to an HTML <div> element.
function mountUserAvatar(node: HTMLDivElement, props?: UserAvatarProps): void- Name
node- Type
HTMLDivElement- Description
The
<div>element used to render in the<UserAvatar />component
- Name
props?- Type
- UserAvatarProps
- Description
The properties to pass to the
<UserAvatar />component
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="user-avatar"></div>
`
const userAvatarDiv = document.getElementById('user-avatar')
clerk.mountUserAvatar(userAvatarDiv)unmountUserAvatar()
Unmount and run cleanup on an existing <UserAvatar /> component instance.
function unmountUserAvatar(node: HTMLDivElement): void- Name
node- Type
HTMLDivElement- Description
The container
<div>element with a rendered<UserAvatar />component instance.
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="user-avatar"></div>
`
const userAvatarDiv = document.getElementById('user-avatar')
clerk.mountUserAvatar(userAvatarDiv)
// ...
clerk.unmountUserAvatar(userAvatarDiv)Properties
The <UserAvatar /> component accepts the following properties, all of which are optional:
- Name
rounded?- Type
boolean- Description
Determines whether the user avatar is displayed with rounded corners.
- Name
appearance?- Type
Appearance | undefined- Description
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
fallback?- Type
ReactNode- Description
Optional element to be rendered while the component is mounting.
Customization
To learn about how to customize Clerk components, see the customization documentation.
Feedback
Last updated on