T

GitHub username tglide invalid username

Edit props

Props

Close

---

Delay (ms)

Features

• 🎮 Automatic & manual control over image rendering
• 🗼 Fallback supports any children elements
• ⌛ Optionally delay fallback rendering to avoid flashes

Usage

Builder

<script lang="ts">
  import { Avatar } from "melt";

  const avatar = new Avatar({src: '...'});
</script>

<img {...avatar.image} alt="Avatar" />
<span {...avatar.fallback}>RH</span>

Component

<script lang="ts">
  import { Avatar } from "melt/components";
</script>

<Avatar src="...">
  {#snippet children(avatar)}
    <img {...avatar.image} alt="Avatar" />
    <span {...avatar.fallback}>Fallback</span>
  {/snippet}
</PinInput>

API Reference

Constructor Props

The props that are passed when calling

new Avatar()

new Avatar()

export type AvatarProps = {
  /**
   * The source of the image to display.
   */
  src?: MaybeGetter<string | undefined>;

  /**
   * The amount of time in milliseconds to wait before displaying the image.
   *
   * @default 0
   */
  delayMs?: MaybeGetter<number | undefined>;

  /**
   * A callback invoked when the loading status store of the avatar changes.
   */
  onLoadingStatusChange?: (value: ImageLoadingStatus) => void | undefined;
};

export type AvatarProps = {
  /**
   * The source of the image to display.
   */
  src?: MaybeGetter<string | undefined>;

  /**
   * The amount of time in milliseconds to wait before displaying the image.
   *
   * @default 0
   */
  delayMs?: MaybeGetter<number | undefined>;

  /**
   * A callback invoked when the loading status store of the avatar changes.
   */
  onLoadingStatusChange?: (value: ImageLoadingStatus) => void | undefined;
};

Properties

The properties returned from

new Avatar()

new Avatar()

• src

  string

  string
• delayMs

  number

  number
• loadingStatus

  ImageLoadingStatus

  ImageLoadingStatus
• image

  {
    readonly "data-melt-avatar-image": ""
    readonly src: string
    readonly style: `display: ${string}`
    readonly onload: () => (() => void) | undefined
    readonly onerror: () => void
  }

  {
    readonly "data-melt-avatar-image": ""
    readonly src: string
    readonly style: `display: ${string}`
    readonly onload: () => (() => void) | undefined
    readonly onerror: () => void
  }
• fallback

  {
    readonly "data-melt-avatar-fallback": ""
    readonly style: `display: ${string}` | undefined
    readonly hidden: true | undefined
  }

  {
    readonly "data-melt-avatar-fallback": ""
    readonly style: `display: ${string}` | undefined
    readonly hidden: true | undefined
  }