Avatar

React

import { Avatar, AvatarImage, AvatarFallback } from '@klnjs/react-avatar'
import classes from './avatar.module.css'
import image from './react.svg'

export default () => (
  <Avatar className={classes.avatar}>
    <AvatarImage src={image.src} className={classes.image} />
    <AvatarFallback className={classes.fallback}>RK</AvatarFallback>
  </Avatar>
)

Styles

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  overflow: hidden;
  color: var(--sl-color-text-invert);
  background: var(--sl-color-accent-high);
  padding: 8px;
}

.image {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.fallback {
  font-weight: bold;
  font-size: 24px;
}

Features

• Image loading status handling.

• Fallback to any content imaginable.

• Delay fallback to avoid flickering.

Installation

bun install @klnjs/react-avatar

Definitions

• Avatar
• AvatarImage
• AvatarFallback

/>

Components

• Avatar
• Image
• Fallback

Avatar

Contains all the parts of an avatar.

Prop	Type	Default
asChild	boolean	false
onStatusChange	(status: AvatarStatus) => void	-

Image

Used to render the image. The image is hidden until it has loaded. Use the root property onStatusChange, to listen to the image status.

Prop	Type	Default
asChild	boolean	false
src	string	-

Fallback

Used to render the fallback while the image is loading, or when an error occurs. To prevent flickering between image and fallback use the delay property, to delay rendering of the fallback whilst image is loading.

Prop	Type	Default
asChild	boolean	false
delay	number	-