Skip to content
rw3iss Auth

UserAvatar

atom @rw3iss/auth-client/preact/atoms/UserAvatar framework-adapters/preact/components/atoms/UserAvatar.tsx ↗

Square user avatar. Renders the user’s display_name initials (or email’s first letter) over a deterministic colored background derived from the user id, so the same user gets the same color across mounts without storing palette state.

Falls back to a ”?” glyph when no user is logged in — callers can gate render with <ProtectedRoute> if they want to hide entirely.

Usage

import { UserAvatar } from '@rw3iss/auth-client/preact/atoms';
<UserAvatar />

Props

NameTypeDescription
clientAuthClient
sizenumberPixel size for both width and height. Default 36.
classNamestringExplicit user data. When provided, overrides the auth-snapshot source — useful in lists (admin user tables, members lists) where each row represents someone OTHER than the signed-in caller. When omitted, defaults to the snapshot user. /