Binary Faces Avatar Generator

Binary Faces is a deterministic avatar generator that creates unique, customizable black-and-white avatars based on input values. Each avatar generated is consistent for the same input, ensuring a reliable and reproducible avatar for a given seed. Built with TypeScript, it provides strong type support and customization options for developers.

Features

• Deterministic Avatars: Consistently generates the same avatar for a given input.
• Customizable Styles: Supports various customization options such as size, background color, border, and face-only view.
• TypeScript Support: Full TypeScript support for type safety and intellisense.

Screenshots

Installation

Install the package via npm:

npm install binary-faces

or via Yarn:

yarn add binary-faces

Usage

import React from "react";
import AvatarGenerator from "binary-faces";

const App = () => {
  return (
    <div>
      <h1>Binary Faces Avatar</h1>
      <AvatarGenerator value="unique_seed_value" />
    </div>
  );
};

export default App;

Props

The component accepts several props to customize the avatar appearance. Here’s a breakdown of each prop and its default values:

| Prop Name | Type | Description | Default | |----------------|---------|--------------------------------------------------------------------------------|------------| | value | string | Seed value for deterministic avatar generation. | "" | | isRounded | boolean | If true, displays the avatar with rounded corners. | false | | width | number | Width and height of the avatar in pixels. | 100 | | bgColor | string | Background color of the avatar container. | "white" | | onlyFace | boolean | If true, zooms in on the face, cropping the avatar to show only the face. | false | | border | boolean | If true, adds a border around the avatar. | false | | borderColor | string | Color of the border around the avatar (if border is enabled). | "black" | | borderSize | number | Thickness of the border around the avatar (if border is enabled), in pixels. | 2 |

Example with Custom Props

import React from "react";
import AvatarGenerator from "binary-faces";

const App = () => {
  return (
    <div>
      <h1>Customized Avatar</h1>
      <AvatarGenerator 
        value="another_unique_seed"
        isRounded={true}
        width={150}
        bgColor="lightgray"
        onlyFace={true}
        border={true}
        borderColor="blue"
        borderSize={3}
      />
    </div>
  );
};

export default App;