@creativestefan/avatar-composer 🎨

A highly customizable, interactive React avatar component library. Drag, drop, and style your perfect avatar!

✨ Features

• Interactive Selection: Choose from hundreds of combinations of faces, hair, eyes, and outfits.
• Draggable Parts: Fine-tune the position of every element via props or interactive dragging.
• Responsive Scaling: Easily resize with the size prop (pixels or percentages).
• Customizable Backgrounds: Change background color and circle radius.
• TypeScript First: Full type safety and intellisense included.

🚀 Installation

# via npm
npm install @creativestefan/avatar-composer

# via yarn
yarn add @creativestefan/avatar-composer

# via pnpm
pnpm add @creativestefan/avatar-composer

🛠️ Usage

import { Avatar } from '@creativestefan/avatar-composer';

function App() {
  return (
    <div style={{ width: '400px' }}>
      <Avatar 
        size={300}
        face="Skin1Fair"
        hair="Style01"
        eyes="Normal"
        mouth="NormalSmile"
        outfit="Outfit01"
        backColor="#B5E2DC"
        backRadius={154}
      />
    </div>
  );
}

⚙️ Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | size | number \| string | "100%" | Width and height of the avatar container. | | face | string | "Skin1Fair" | Face/Skin style name. | | hair | string | "Style01" | Hair style name. | | eyes | string | "Normal" | Eye style name. | | mouth | string | "NormalSmile" | Mouth style name. | | accessory | string | "none" | Accessory name (Glasses, Caps, etc). | | outfit | string | "Outfit01" | Outfit style name. | | backColor | string | "#B5E2DC" | Background circle color (hex/rgb). | | backRadius | number | 154 | Radius of the background circle. | | positions | Record<string, Position> | defaults | Custom coordinates for each part { x, y }. |

🧩 Advanced: Customization & Individual Parts

You can import individual parts groups to build your own custom avatar engine or UI:

import { Avatar, FaceParts, HairParts } from '@creativestefan/avatar-composer';

// Use the main component with standard keys
<Avatar face="Skin1Fair" hair="Style01" />

// Or access parts directly for your own UI
const MyCustomHair = HairParts.Style01;
const MyCustomFace = FaceParts.Skin1Fair;

Positioning

You can override the default offsets for any part:

const customPositions = {
  hair: { x: 85, y: 104 },
  accessory: { x: 151, y: 188 }
};

<Avatar positions={customPositions} />

📄 License

MIT © Creative Stefan