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 | | | opaicty | 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>
    );
  }
}