Patterns
Avatar Uploader
A clickable avatar that opens a file picker — shows the image or an initials fallback, a camera overlay on hover, and a spinner while uploading. The host owns the upload.
A clickable avatar that opens a file picker: it shows the current image (or an initials fallback), a camera overlay on hover, and a spinner while uploading. The host owns the upload — onSelectFile hands back the chosen File, and uploading drives the spinner.
Import
import { AvatarUploader } from "@yuhuanowo/yunui/patterns";
Example
Without src it renders the fallback (e.g. initials) on a gradient. Set uploading while your upload is in flight to swap the camera for a spinner.
AvatarUploader
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| fallback | ReactNode | — | Fallback content (e.g. the user's initials). |
| label | string | — | Accessible label for the control. |
| onSelectFile | ((file: File) => void) | — | Called with the picked file. |
| size | number | 48 | Diameter in px. |
| src | string | — | Current avatar image URL; when absent, `fallback` is shown. |
| uploading | boolean | — | True while an upload is in flight — shows a spinner. |