1.0.3 • Published 5 years ago
react-avatar-generator v1.0.3
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-generatorornpm i react-avatar-generatorimport 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>
);
}
}