Popularity
0.9
Growing
Activity
0.9
Declining
17
1
3

Monthly Downloads: 0
Programming language: JavaScript
Tags: UI Components     Miscellaneous    

react-avatar-generator alternatives and similar libraries

Based on the "Miscellaneous" category

Do you think we are missing an alternative of react-avatar-generator or a related project?

Add another 'Miscellaneous' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
View more from us

README

React Avatar Generator

This was inspired by an old website called LayerVault. You can see an example of how that used to look like here.

Getting Started

  • yarn add react-avatar-generator or npm i react-avatar-generator
  • import AvatarGenerator from 'react-avatar-generator';

Example Usage

<AvatarGenerator
  colors={['#333', '#222', '#ccc']}
  backgroundColor="#000"
/>

This creates something like this:

With a little playing around with this component I found it quite easy to make something similar to what LayerVault originally had.

Props

prop type default options
width number 200
height number 200
mirrors number 3
zoom number 0.2
rotation number 0.3
fade number 1
opacity number 0.3
amount number 16
spacing number 20
wavelength number 2
sizing number 4
shape string 'circle' can be circle, triangle or square
backgroundColor string '#fff'
backgroundOpacity number 0.3
colors array []

Methods

prop type description
randomize function Randomizes the kaleidoscope to have a new random pattern
isValidHex function Passing in a string will return true of false if that string is a valid hex, a helpful function to have when working with colors
getImageData function Calling this function returns the raw image/png data you can then use to save into a .png file.

Using Methods

class CustomAvatarGenerator extends React.Component {
  constructor(props) {
    super(props);
    this.avatarGenerator = null;
  }

  randomize() {
    this.avatarGenerator.randomize();
  }

  render() {
    return (
      <div>
        <button onClick={this.randomize}>Randomize</buttom>
        <AvatarGenerator
          ref={(el) => {
            this.avatarGenerator = el;
          }
          colors={['#333', '#222', '#ccc']}
          backgroundColor="#000"
        />
      </div>
    );
  }
}