react-katar

Create random avatars from user IDs, no need to store it on the server

Demo

https://lnquy065.github.io/react-katar

Install

npm install --save react-katar

Usage

import React, { Component } from 'react'

import { Avatar } from 'react-katar'

class Example extends Component {
  render() {
    return <Avatar id="Hello" />
  }
}

Customize

Shapes

• Square (default)
• Circle

// square
<Avatar  id="Hello"/>

// circle
<Avatar  id="Hello" shape="circle"/>

Border

• None (default)
• Border color (the same with avatar's color as default)
• Border width (default: 3px)

// default
<Avatar  id="Hello" shape="circle" border/>

// custom border width
<Avatar  id="Hello" shape="circle" border borderWidth="5px"/>

// custom border color
<Avatar  id="Hello" shape="circle" border borderColor="black"/>

Size

• width (default: 90px)
• height (the same with width but can't manual setting)

// default
 <Avatar  id="Hello" shape="circle" border/>

// custom size
<Avatar  id="Hello" shape="circle" border width="100"/>
<Avatar  id="Hello" shape="circle" border width="120"/>

Salt

You can add salt to avatar to create another avatar from the same Id

<Avatar id="Hello" shape="circle" border salt="hello"/>

<Avatar id="Hello" shape="circle" border salt="my-name"/>

<Avatar id="Hello" shape="circle" border  salt="is-quy"/>

Properties

property name	type	default	description
id	string	required	Use for create avatar
salt	string	none	Appended after the id
width	number	90	Avatar's width, base on px unit
shape	square,circle	square	Avatar's shape
backgroundColor	string	#FFFFFF	Avatar's background color
border	bool	false	Enable border
borderWidth	string	3px	Border's width
borderColor	string	none	Border's color, leave empty if you want to set avatar color to this property
canvasStyle	object	none	Style object for canvas

License

MIT © lnquy065