react-ui-avatars

Wrapper component for https://ui-avatars.com

Generate avatars from a users intials.

Credit to @LasseRafn for his awesome API.

Demo

https://codepen.io/novigradian/pen/qMwJgg

Installing

Using npm:

npm install react-ui-avatars

Usage

import ReactDOM from 'react-dom';
import React from 'react';
import UIAvatar from 'react-ui-avatars';
 
ReactDOM.render(
  <UIAvatar name='Warren Zevon' color='#551a8b' />,
  document.getElementById('#container')
);

Options

Pass props same as specified at https://ui-avatars.com.

Example:

<UIAvatar name='Warren Zevon' size={128} />

Extra props are passed on to <img /> element.

Global Settings

Global settings for your app can be configured. The properties are the same as the props.

The global settings can be overriden on an individual instance of the component by passing the prop.

import ReactDOM from 'react-dom';
import React from 'react';
import UIAvatar from 'react-ui-avatars';
 
UIAvatar.settings = {
  size: 128,
  rounded: true
};
 
ReactDOM.render(
  <UIAvatar name='Warren Zevon' />,
  document.getElementById('#container')
);