# reactars

> A React lib to generate avatars

Latest version **1.2.1** (published 2021-11-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactars
pnpm add reactars
yarn add reactars
bun add reactars
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2021-11-20 |
| First published | 2021-11-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 287.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | pmqueiroz |
| Maintainers | pmqueiroz |

## Links

- npm: https://www.npmjs.com/package/reactars
- Repository: https://github.com/pmqueiroz/reactars
- Homepage: https://github.com/pmqueiroz/reactars#readme
- Issues: https://github.com/pmqueiroz/reactars/issues
- npm.io page: https://npm.io/package/reactars

## Dependencies (3)

- [ramda](https://npm.io/package/ramda.md) ^0.27.1
- [react](https://npm.io/package/react.md) ^17.0.2
- [styled-tools](https://npm.io/package/styled-tools.md) ^1.7.2

## Recent versions

- 1.2.1 (latest) — 2021-11-20
- 1.2.0 — 2021-11-20
- 1.1.0 — 2021-11-20
- 1.0.0 — 2021-11-19
- 0.0.2 — 2021-11-19
- 0.0.1 — 2021-11-19

## README

<div align="center">

# Reactars
A React lib to generate easily customizable avatars

![GitHub](https://img.shields.io/github/license/pmqueiroz/reactars?style=flat-square)
![npm](https://img.shields.io/npm/v/reactars?style=flat-square)
![npm type definitions](https://img.shields.io/npm/types/reactars?style=flat-square)


   
</div>

## Installation

### Using Yarn

```
yarn add reactars
```

### Using Npm

```
npm i reactars
```
## Usage

### Importing

You can import reactars component as default and use all modes 

```ts
import Reactars from 'reactars'
```
or import separately each one

```ts
import { ReactarsNotification, ReactarsStatus, ReactarsDefault } from 'reactars'
```

### Examples

<img width="450px" src="./.github/assets/examples.png" />

### Usage Examples

```js
<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) | [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

```ts
{
   notification: '#E65A4D',
   busy: '#E65A4D',
   idle: '#F7C656',
   offline: '#CCCCCC',
   online: '#50CA42'
}
```
## License

[MIT](https://github.com/pmqueiroz/reactars/blob/master/LICENSE)

---
_Source: https://npm.io/package/reactars · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._