Avatar

The Avatar component is a React component that represents a user avatar or profile picture. It displays an image or initials within container.

Avatar provides support for fallback text or elements when the image fails to load, or when the image is not provided.

SA

Properties

name

src

Installation

To use the avatar machine in your project, run the following command in your command line:

npm install @zag-js/avatar @zag-js/react
# or
yarn add @zag-js/avatar @zag-js/react

npm install @zag-js/avatar @zag-js/solid
# or
yarn add @zag-js/avatar @zag-js/solid

npm install @zag-js/avatar @zag-js/vue
# or
yarn add @zag-js/avatar @zag-js/vue

npm install @zag-js/avatar @zag-js/vue
# or
yarn add @zag-js/avatar @zag-js/vue

This command will install the framework agnostic avatar logic and the reactive utilities for your framework of choice.

Anatomy

To set up the avatar correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Usage

First, import the avatar package into your project

import * as avatar from "@zag-js/avatar"

The avatar package exports two key functions:

• machine — The state machine logic for the avatar widget.
• connect — The function that translates the machine's state to JSX attributes and event handlers.

You'll also need to provide a unique id to the useMachine hook. This is used to ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the avatar machine in your project 🔥

import * as avatar from "@zag-js/avatar"
import { useMachine, normalizeProps } from "@zag-js/react"

function Avatar() {
  const [state, send] = useMachine(avatar.machine({ id: "1" }))

  const api = avatar.connect(state, send, normalizeProps)

  return (
    <div {...api.rootProps}>
      <span {...api.fallbackProps}>PA</span>
      <img alt="PA" src={src} {...api.imageProps} />
    </div>
  )
}

import * as avatar from "@zag-js/avatar"
import { useMachine, normalizeProps } from "@zag-js/solid"

function Avatar() {
  const [state, send] = useMachine(avatar.machine({ id: "1" }))

  const api = avatar.connect(state, send, normalizeProps)

  return (
    <div {...api.rootProps}>
      <span {...api.fallbackProps}>PA</span>
      <img alt="PA" src={src} {...api.imageProps} />
    </div>
  )
}

import * as avatar from "@zag-js/avatar"
import { useMachine, normalizeProps } from "@zag-js/vue"

export default defineComponent({
  name: "Avatar",
  setup() {
    const [state, send] = useMachine(avatar.machine({ id: "1" }))

    const apiRef = computed(() =>
      avatar.connect(state.value, send, normalizeProps),
    )

    return () => {
      const api = apiRef.value
      return (
        <div {...api.rootProps}>
          <span {...api.fallbackProps}>PA</span>
          <img alt="PA" src={src} {...api.imageProps} />
        </div>
      )
    }
  },
})

<script setup>
  import * as avatar from "@zag-js/avatar"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"

  const [state, send] = useMachine(avatar.machine({ id: "1" }))

  const api = computed(() => avatar.connect(state.value, send, normalizeProps))
</script>

<template>
  <div v-bind="api.rootProps">
    <span v-bind="api.fallbackProps">PA</span>
    <img alt="PA" src="{src}" v-bind="api.imageProps" />
  </div>
</template>

Listening for loading status changes

When the image has loaded or failed to load, the onLoadingStatusChange callback is invoked.

const [state, send] = useMachine(
  avatar.machine({
    onLoadingStatusChange(details) {
      // details => { status: "error" | "loaded" }
    },
  }),
)

Styling guide

Earlier, we mentioned that each avatar part has a data-part attribute added to them to select and style them in the DOM.

[data-scope="avatar"][data-part="root"] {
  /* Styles for the root part */
}

[data-scope="avatar"][data-part="image"] {
  /* Styles for the image part */
}

[data-scope="avatar"][data-part="fallback"] {
  /* Styles for the fallback part */
}

Methods and Properties

Machine Context

The avatar machine exposes the following context properties:

• onLoadingStatusChange(details: StatusChangeDetails) => voidFunctional called when the image loading status changes.
• idstringThe unique identifier of the machine.
• getRootNode() => ShadowRoot | Node | DocumentA root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
• dir"ltr" | "rtl"The document's text/writing direction.

Machine API

The avatar api exposes the following methods:

• isLoadedbooleanWhether the image is loaded.
• showFallbackbooleanWhether the fallback is shown.
• setSrc(src: string) => voidFunction to set new src.
• setLoaded() => voidFunction to set loaded state.
• setError() => voidFunction to set error state.