React Random Avatars

React Random Avatars is a simple and easy-to-use React component that generates random avatars based on a provided name for your application. The generated avatar is unique and consistent for each name, which makes it suitable for user profile images or any other use case where a visual representation of a name is needed.

React random avatars preview

Installation

You can install the React Random Avatars component using npm:

npm install react-random-avatars

Usage

Here's a quick example of how to use the RandomAvatar component in your React application:

import { RandomAvatar } from "react-random-avatars";

function App({ name }) {
  return (
    <div>
      <RandomAvatar name={name} size={40} />
    </div>
  );
}

export default App;

Props

Prop	Type	Default	Description
name	string	"Default Name"	The input string used to differentiate the avatars
size	number	40	The size of the avatar in pixels (width & height)
square	boolean	false	If true, the avatar shape will be square
mode	string	"random"	The avatar mode: "random", "pattern", or "colors"
pattern	array	-	A 2D array of colors representing the custom avatar pattern (Required if mode is "pattern")

Avatar Modes

Random Avatar Mode (default)

This mode generates a random avatar based on the provided name. Each avatar is unique and consistent for each name.

Random Avatar Example #### Pattern Avatar Mode This mode allows you to provide your own custom pattern to create an avatar. The pattern is a 2D array of colors representing the avatar's design. When selecting this mode, you must also provide a value for the pattern prop.

Pattern Avatar Example #### Colors Avatar Mode This mode generates an avatar using a color blend based on the provided name. It creates a radial gradient with different colors to represent the name.