React-avataaars NPM

React Avataaars

Inspired by React component for Avataaars.

license

Live Demo available HERE!

Installation

First install the package with npm

$ npm install react-avataaars --save

Or Yarn

$ yarn add react-avataaars

Usage

Use it with Typescript

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 (
      <div className="App">
        <Avatar options={options} hash={hash} />
      </div>
    );
  }
}

export default App;

Or JavaScript

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 (
      <div className="App">
        <Avatar options={options} hash={hash} />
      </div>
    );
  }
}

export default App;

Run example

$ 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: