Unavatar
This is a simple React component to create default avatars for your users / customers / whatever.
How to use
Just pass a string to the name property to the Unavatar
component and it will display a nice circular avatar with the name initials and a color chosen from a predefined palette.
; Component { return <div> <Unavatar name="Armando Sosa" /> <span>Armando Sosa</span> </div> ; }
Installation
$ yarn add unavatar
or
$ npm install --save unavatar
Uniqueness
The name property is hashed and then used to select a background and text color from the color palette. If you want to improve the uniqueness of the avatar, you can pass an id property to be used instead of the name.
; Component { return <div> customers </div> ; }
Color Palette
By default, Unavatar
will get the colors from a palette inspired by Material Design but you can pass an array of hex colors to the palette
property to use that instead. This package comes with other built-in palettes that you can see in the demo.
; Component { return <div> customers </div> ; }
You can use a color schema that matches your branding!
; const myBrandingPalette = '#ff0000' '#ffff00' '#00ffff' '#0000ff' '#b4d455'; Component { return <div> customers </div> ; }