1.2.1 • Published 2 years ago
reactars v1.2.1
Reactars
A React lib to generate easily customizable avatars
Installation
Using Yarn
yarn add reactarsUsing Npm
npm i reactarsUsage
Importing
You can import reactars component as default and use all modes
import Reactars from 'reactars'or import separately each one
import { ReactarsNotification, ReactarsStatus, ReactarsDefault } from 'reactars'Examples
Usage Examples
<Reactars badgeType="status" name="pmqueiroz" status="online" />
<Reactars badgeType="notification" name="pmqueiroz" count={3} />Parameters
| Parameter | Required | Default | Type |
|---|---|---|---|
badgeType | yes | "none" | "none", "notification", "status" |
name | yes | "Reactars" | string |
badgePosition | no | "top-right" | "top-left", "top-right", "bottom-right", "bottom-left" |
badgeColor | no | BadgeColorsDefaults | BadgeColorsDefaults |
radii | no | "circle" | "circle", "square", "rounded" |
url | no | undefined | string |
backgroundColor | no | "#2A2C2C" | CSSProperties['color'] |
size | no | 48 | px |
badgeOffset | no | 0 | number |
status | if type "status" | "online" | "online", "busy", "offline", "idle" |
count | if type "notification" | undefined | number |
notificationTextColor | if type "notification" | "#FFFFFF" | CSSProperties['color'] |
Obs.: Size will be converted to rem in base16
BadgeColorsDefaults
{
notification: '#E65A4D',
busy: '#E65A4D',
idle: '#F7C656',
offline: '#CCCCCC',
online: '#50CA42'
}