Avatar
Description
The Avatar component is a component used to display an avatar image with a fallback in case of an error while loading the image.
Usage
CN
import { Avatar } from "mogora-ui";
export default function AvatarDemo() {
return (
<Avatar>
<Avatar.Image src="https://github.com/shadcn.png" alt="CN" />
<Avatar.Fallback>CN</Avatar.Fallback>
</Avatar>
)
}
API Reference
Avatar
The main component that provides context for managing the isLoaded and hasError state. Props: Does not accept direct props.
Avatar.Image
A component for displaying an avatar image.
| Prop | Type | Description |
|---|---|---|
| src | string | Avatar image URL. |
| alt | string | Alternative text for the image. |
| className | string | (Optional) Adds a custom class for styling |
| ...props | ImgHTMLAttributes<HTMLImageElement> | Additional properties for the <img> element. |
Avatar.Fallback
A component that is displayed if the image fails to load.
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | Fallback content, such as the user's initials. |
Avatar.Fallback
- The Avatar component uses AvatarContext to store the status of whether the image has loaded (isLoaded) or an error has occurred (hasError).
- Avatar.Image will display the image if it loads successfully and hide it while it is still loading.
- If the image fails to load, Avatar.Fallback will be displayed as a replacement.