https://github.com/andreasonny83/react-avataaars
React component for the Avataaars library
https://github.com/andreasonny83/react-avataaars
avataaars react react-components react-typescript
Last synced: about 1 year ago
JSON representation
React component for the Avataaars library
- Host: GitHub
- URL: https://github.com/andreasonny83/react-avataaars
- Owner: andreasonny83
- Created: 2019-04-19T15:04:36.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:49:36.000Z (over 3 years ago)
- Last Synced: 2025-03-18T02:12:13.070Z (about 1 year ago)
- Topics: avataaars, react, react-components, react-typescript
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/react-avataaars
- Size: 2.27 MB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Avataaars
Inspired by [React component for Avataaars](https://github.com/fangpenlin/avataaars).
[](https://www.npmjs.com/package/react-avataaars)
Live Demo available [HERE!](https://stackblitz.com/edit/react-avataaars)
## Installation
First install the package with npm
```sh
$ npm install react-avataaars --save
```
Or Yarn
```sh
$ yarn add react-avataaars
```
## Usage
### Use it with Typescript
```ts
import React, { PureComponent } from 'react';
import { Avatar, Options } from 'react-avataaars';
class App extends PureComponent {
render() {
const hash: string = 'random-string';
const options: Options = {
clothes: 'sweater',
eyebrow: 'angry',
style: 'circle',
};
return (
);
}
}
export default App;
```
### Or JavaScript
```ts
import React, { PureComponent } from 'react';
import { Avatar } from 'react-avataaars';
class App extends PureComponent {
render() {
const hash = 'random-string';
const options = {
clothes: 'sweater',
eyebrow: 'angry',
style: 'circle',
};
return (
);
}
}
export default App;
```
## Run example
```sh
$ npm run example
```
This will serve the `example` folder in this project against the development (`src`) folder of the React Avataaars project.
There is also an `npm-less` version of the example using the minimised JavaScript version of the library running inside just one HTML file with nothing else.
You can see that in action by running:
```sh
$ npm run example-html
```
Or just check out the `example-html` folder in this repository if you are interested in the code.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Add your changes: `git add .`
4. Commit your changes: `git commit -am 'Add some feature'`
5. Push to the branch: `git push origin my-new-feature`
6. Submit a pull request :sunglasses:
## Credits
This library has been made possible by:
- https://github.com/fangpenlin/avataaars
- https://github.com/DiceBear/avatars
## Built With
* Typescript
* React
* Avataaars
* Love
## License
[MIT License](https://andreasonny.mit-license.org/2019) © Andrea SonnY