Skip to content

React component for https://ui-avatars.com. Generate avatar images with initials from names.

License

Notifications You must be signed in to change notification settings

ozzywalsh/react-ui-avatars

Repository files navigation

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')
);

About

React component for https://ui-avatars.com. Generate avatar images with initials from names.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published