Setting the file. One moment.
Chapter 12 · Clerk Astro Patterns
Subchapter 12.3
references/island-components.mdMarkdown1 KBView on GitHub
Also bundled
Evals// src/components/UserNav.tsx
import { useAuth, useUser, UserButton, SignInButton } from '@clerk/astro/react'
export function UserNav() {
const { isSignedIn, isLoaded } = useAuth()
const { user } = useUser()
if (!isLoaded) return null
if (!isSignedIn) {
return <SignInButton mode="modal" />
}
return (
<div>
<span>{user?.firstName}</span>
<UserButton />
</div>
)
}---
// src/pages/index.astro
import { UserNav } from '../components/UserNav'
---
<UserNav client:load />| Directive | When to Use |
|---|---|
client:load | Hydrate immediately on page load |
client:idle | Hydrate when browser is idle |
client:visible | Hydrate when component scrolls into view |
client:only="react" | No SSR, render only on client |
import {
SignIn,
SignUp,
UserButton,
UserProfile,
OrganizationSwitcher,
SignInButton,
SignOutButton,
} from '@clerk/astro/react'Use these in islands (.tsx files) — not directly in .astro files without a client directive.
client:* directive — without it the island is server-rendered only and Clerk hooks return undefined@clerk/astro/react — not @clerk/reactclient:load