Skip to main content

Avatar

Circular avatar component supporting images, initials, and file upload. Click to view full-size image or to upload new one when editable.

Import

import { Avatar } from '@adoptaunabuelo/react-components';

Props

icon
string
Image URL to display
name
string
User name (displays first letter as fallback when no icon)
editable
boolean
Enable file upload on click (accepts jpg, jpeg, png, gif)
clickable
boolean
Enable click to view full-size image in modal
onChange
(file: string | ArrayBuffer | null) => void
Callback fired when new image is selected, receives base64-encoded file
style
React.CSSProperties
Custom styles for the avatar container

Usage

<Avatar
  icon={userImageUrl}
  name="John Doe"
  editable
  onChange={(file) => uploadAvatar(file)}
/>

Notes

  • When editable is true, clicking triggers file upload dialog
  • When clickable is true, clicking displays full-size image in modal
  • If no icon is provided, displays first letter of name in uppercase
  • File upload only accepts image formats: jpg, jpeg, png, gif
  • onChange receives the file as base64-encoded string

Build docs developers (and LLMs) love