react-avatar-generator

React component which allows your users to generate random kaleidoscope avatars.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-avatar-generator
54131.0.34 years ago4 years agoMinified + gzip package size for react-avatar-generator in KB

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