Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-random-avatars
Advanced tools
Readme
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.
You can install the React Random Avatars component using npm:
npm install react-random-avatars
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;
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") |
This mode generates a random avatar based on the provided name. Each avatar is unique and consistent for each name.
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.
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.
Contributions are welcome! If you'd like to contribute and help the community grows, please follow these steps:
How to insert an avatar?
Thanks goes to these wonderful people (emoji key):
sagiproject 💻 |
This project follows the all-contributors specification. Contributions of any kind are welcome!
React Random Avatars is released under the MIT License.
FAQs
Generate a unique, customizable, and visually appealing avatar
The npm package react-random-avatars receives a total of 199 weekly downloads. As such, react-random-avatars popularity was classified as not popular.
We found that react-random-avatars demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.