react-katar

1.0.2 • Public • Published

react-katar

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

NPM JavaScript Style Guide

img

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

img

// 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)

img

// 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)

img

// 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

img

<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

Readme

Keywords

Package Sidebar

Install

npm i react-katar

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

71.8 kB

Total Files

7

Last publish

Collaborators

  • lnquy065