https://github.com/JosephSmith127/react-avatar-generator
Generate fun kaleidoscope for user avatars.
https://github.com/JosephSmith127/react-avatar-generator
Last synced: 19 days ago
JSON representation
Generate fun kaleidoscope for user avatars.
- Host: GitHub
- URL: https://github.com/JosephSmith127/react-avatar-generator
- Owner: jsmmth
- Created: 2019-01-10T04:35:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T20:47:33.000Z (over 2 years ago)
- Last Synced: 2025-03-26T01:35:40.905Z (20 days ago)
- Language: JavaScript
- Size: 519 KB
- Stars: 69
- Watchers: 1
- Forks: 6
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-components - react-avatar-generator - Generate fun kaleidoscope for user avatars. (UI Components / Form Components)
- awesome-react - react-avatar-generator - Generate fun kaleidoscope for user avatars.  (UI Components / Form Components)
- awesome-react-components - react-avatar-generator - Generate fun kaleidoscope for user avatars. (UI Components / Form Components)
- awesome-react-components - react-avatar-generator - Allows users to create random kaleidoscopes to be used as avatars. (UI Components / Miscellaneous)
- awesome-react-components - react-avatar-generator - Allows users to create random kaleidoscopes to be used as avatars. (UI Components / Miscellaneous)
- awesome-react-components - react-avatar-generator - Generate fun kaleidoscope for user avatars. (UI Components / Form Components)
- fucking-awesome-react-components - react-avatar-generator - Generate fun kaleidoscope for user avatars. (UI Components / Form Components)
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](https://dribbble.com/shots/691265-Kaleidoscope-In-Production).
## Getting Started
- `yarn add react-avatar-generator` or `npm i react-avatar-generator`
- `import AvatarGenerator from 'react-avatar-generator';`
## Example Usage
```
```
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 (
Randomize
{
this.avatarGenerator = el;
}
colors={['#333', '#222', '#ccc']}
backgroundColor="#000"
/>
);
}
}
```