🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

react-avatar-generator

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-avatar-generator

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

1.0.3
latest
Version published
Weekly downloads
828
-20.38%
Maintainers
1
Weekly downloads
 
Created

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

proptypedefaultoptions
widthnumber200
heightnumber200
mirrorsnumber3
zoomnumber0.2
rotationnumber0.3
fadenumber1
opaictynumber0.3
amountnumber16
spacingnumber20
wavelengthnumber2
sizingnumber4
shapestring'circle'can be circle, triangle or square
backgroundColorstring'#fff'
backgroundOpacitynumber0.3
colorsarray[]

Methods

proptypedescription
randomizefunctionRandomizes the kaleidoscope to have a new random pattern
isValidHexfunctionPassing in a string will return true of false if that string is a valid hex, a helpful function to have when working with colors
getImageDatafunctionCalling 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>
    );
  }
}

FAQs

Package last updated on 10 Jan 2019

Did you know?

Socket

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.

Install

Related posts