react-avatar-generator

Generate fun kaleidoscope for user avatars.

Programming language: JavaScript

Tags: UI Components     Miscellaneous    

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