react-katar v1.0.2

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

License

MIT © lnquy065