@mshafiqyajid/react-avatar
Headless avatar hook and styled component. Image with initials fallback, status indicator, circle/square shape, group stacking with overflow count.
Playground #
SY
Props
TSX
import { AvatarStyled } from "@mshafiqyajid/react-avatar/styled";
import "@mshafiqyajid/react-avatar/styles.css";
<AvatarStyled
name="Shafiq Yajid"
/>Install #
npm install @mshafiqyajid/react-avatarQuick start #
import { AvatarStyled, AvatarGroup } from "@mshafiqyajid/react-avatar/styled";
import "@mshafiqyajid/react-avatar/styles.css";
<AvatarStyled src="/photo.jpg" name="Shafiq Yajid" status="online" />
// Group
<AvatarGroup max={3}>
<AvatarStyled name="Alice" />
<AvatarStyled name="Bob" />
<AvatarStyled name="Charlie" />
<AvatarStyled name="Dave" />
</AvatarGroup>Headless #
import { useAvatar } from "@mshafiqyajid/react-avatar";
const { imgProps, fallbackProps, status, initials } = useAvatar({
src: "/photo.jpg",
name: "Shafiq Yajid",
});
return status === "loaded"
? <img {...imgProps} className="my-avatar" />
: <span {...fallbackProps} className="my-avatar-fallback">{initials}</span>;API #
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image URL |
| name | string | — | Name for initials fallback |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size |
| shape | "circle" | "square" | "circle" | Shape |
| status | "online" | "offline" | "busy" | "away" | — | Presence indicator dot |
| border | boolean | false | White border ring |
| fallback | ReactNode | — | Custom fallback content |
| color | string | — | Custom background color e.g. "#6366f1" |
| onClick | () => void | — | Makes avatar clickable with hover effect |
| autoColor | boolean | false | Pick a deterministic background from a 10-color palette by hashing name. Overridden by color. |
| showLoading | boolean | false | Render a skeleton overlay while the image is loading. Pairs with src. |