React Usage

The @avatar-generator/react package provides a React component for rendering avatars with any style.

Basic Usage

import { Avatar } from "@avatar-generator/react";
import { initials } from "@avatar-generator/style-initials";

function UserProfile({ user }) {
return (
  <Avatar
    style={initials}
    options={{ seed: user.id, name: user.name, size: 48 }}
    alt={user.name}
  />
);
}

Using Different Styles

import { Avatar } from "@avatar-generator/react";
import { initials } from "@avatar-generator/style-initials";
import { geometric } from "@avatar-generator/style-geometric";
import { pixels } from "@avatar-generator/style-pixels";
import { rings } from "@avatar-generator/style-rings";
import { faces } from "@avatar-generator/style-faces";
import { illustrated } from "@avatar-generator/style-illustrated";
import { anime } from "@avatar-generator/style-anime";

function AvatarGallery({ userId }) {
const commonOptions = { seed: userId, size: 64 };

return (
  <div className="avatar-gallery">
    <Avatar style={initials} options={commonOptions} alt="Initials" />
    <Avatar style={geometric} options={commonOptions} alt="Identicon" />
    <Avatar style={pixels} options={commonOptions} alt="Pixel Faces" />
    <Avatar style={rings} options={commonOptions} alt="Rings" />
    <Avatar style={faces} options={commonOptions} alt="Faces" />
    <Avatar style={illustrated} options={commonOptions} alt="Illustrated" />
    <Avatar style={anime} options={commonOptions} alt="Anime" />
  </div>
);
}

With Custom Options

import { Avatar } from "@avatar-generator/react";
import { geometric } from "@avatar-generator/style-geometric";

function CustomAvatar({ userId }) {
return (
  <Avatar
    style={geometric}
    options={{
      seed: userId,
      size: 96,
      square: true,
      colors: ["#FF6B6B", "#4ECDC4", "#45B7D1"],
      border: { width: 2, color: "#333" },
    }}
    className="custom-avatar"
    alt="User avatar"
  />
);
}

TypeScript Support

The component is fully typed. Options are validated based on the style you pass:

import { Avatar } from "@avatar-generator/react";
import { initials, type InitialsOptions } from "@avatar-generator/style-initials";

interface UserAvatarProps {
userId: string;
userName: string;
}

function UserAvatar({ userId, userName }: UserAvatarProps) {
const options: InitialsOptions = {
  seed: userId,
  name: userName,
  size: 48,
  fontWeight: 700,
};

return <Avatar style={initials} options={options} alt={userName} />;
}

Component Props

Prop	Type	Description
style	Style<T>	The avatar style to use (required)
options	T extends AvatarOptions	Style-specific options (required)
className	string	Additional CSS classes
alt	string	Alt text for accessibility (default: “Avatar”)

Performance

The Avatar component uses useMemo to memoize SVG generation. The avatar is only regenerated when the style or options change.

import { Avatar } from "@avatar-generator/react";
import { initials } from "@avatar-generator/style-initials";
import { useMemo } from "react";

function UserList({ users }) {
return (
  <ul>
    {users.map((user) => (
      <li key={user.id}>
        <Avatar
          style={initials}
          options={useMemo(
            () => ({ seed: user.id, name: user.name }),
            [user.id, user.name]
          )}
          alt={user.name}
        />
        <span>{user.name}</span>
      </li>
    ))}
  </ul>
);
}