react-random-avatars
TypeScript icon, indicating that this package has built-in type declarations

1.3.1 • Public • Published

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.

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.

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.

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.

Contributing

Contributions are welcome! If you'd like to contribute and help the community grows, please follow these steps:

createrandomavatar.com

How to insert an avatar?

  1. Fork the repository;
  2. Build your custom, amazing avatar using this tool;
  3. Create a file with a custom name, here;
  4. Insert the file in the index, here;
  5. Open a pull request, don't you know how to do it? Read this;

Contributors

Thanks goes to these wonderful people (emoji key):

sagiproject
sagiproject

💻

This project follows the all-contributors specification. Contributions of any kind are welcome!

License

React Random Avatars is released under the MIT License.

Dependencies (0)

    Dev Dependencies (32)

    Package Sidebar

    Install

    npm i react-random-avatars

    Weekly Downloads

    578

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    100 kB

    Total Files

    70

    Last publish

    Collaborators

    • sagi403