Component-Specific
useAvatar
Handle avatar logic including fallbacks, status indicators, and loading states.
import { useAvatar } from "saha-ui"Uses
Manage avatar display logic: image load/failure, initials fallback, and deterministic background color selection.
Props
| Name | Type | Description | Default |
|---|---|---|---|
| src | string | Image source URL. | - |
| alt | string | Alt text used to generate initials. | "Avatar" |
| initials | string | Optional custom initials to display; overrides computed initials. | - |
Returns
| Name | Description |
|---|---|
| showInitials | Whether to show initials (no src or image failed). |
| bgColor | Tailwind-like background class chosen deterministically. |
| initialsText | Computed initials (max 2 characters). |
| imageLoaded, imageError | Image load state flags. |
| handleImageLoad/handleImageError | Handlers for image events. |
Example
const { showInitials, bgColor, initialsText, handleImageLoad } = useAvatar({ src: '/me.jpg', alt: 'John Doe' });Notes
Background color is derived from text to keep avatars visually varied and consistent across renders.