# react-avatar-generator

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

Latest version **1.0.3** (published 2019-01-10) · 0 weekly downloads

## Install

```sh
npm install react-avatar-generator
pnpm add react-avatar-generator
yarn add react-avatar-generator
bun add react-avatar-generator
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-01-10 |
| First published | 2019-01-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 166.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 75 |
| Author | Joseph Smith |
| Maintainers | jsmth |

## Links

- npm: https://www.npmjs.com/package/react-avatar-generator
- Repository: https://github.com/JosephSmith127/react-avatar-generator
- Homepage: https://github.com/JosephSmith127/react-avatar-generator#readme
- Issues: https://github.com/JosephSmith127/react-avatar-generator/issues
- npm.io page: https://npm.io/package/react-avatar-generator

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^15.0.0
- [hex-rgb](https://npm.io/package/hex-rgb.md) ^3.0.0
- [webpack](https://npm.io/package/webpack.md) ^4.28.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2

## Recent versions

- 1.0.3 (latest) — 2019-01-10
- 1.0.2 — 2019-01-10
- 1.0.1 — 2019-01-10
- 1.0.0 — 2019-01-10
- 0.0.1 — 2019-01-10

## 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
```
<AvatarGenerator
  colors={['#333', '#222', '#ccc']}
  backgroundColor="#000"
/>
```

This creates something like this:

<img src="https://i.ibb.co/vDg9Trb/Screenshot-2019-01-10-at-04-34-51.png" width="100" />

With a little playing around with this component I found it quite easy to make something similar to what LayerVault originally had.

<img src="https://i.ibb.co/0XmmV0s/Screen-Recording-2019-01-10-at-04-33-23.gif" width="500" />

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

---
_Source: https://npm.io/package/react-avatar-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._