# react-color-bar

> A color bar for displaying data in React.js

Latest version **0.2.0** (published 2021-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-color-bar
pnpm add react-color-bar
yarn add react-color-bar
bun add react-color-bar
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2021-10-16 |
| First published | 2018-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 53.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Joy Kwok |
| Maintainers | joyjoy993 |

## Links

- npm: https://www.npmjs.com/package/react-color-bar
- Repository: https://github.com/joyjoy993/react-color-bar
- Issues: https://github.com/joyjoy993/react-color-bar/issues
- npm.io page: https://npm.io/package/react-color-bar

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^17.0.2
- [ts-loader](https://npm.io/package/ts-loader.md) ^9.2.6
- [react-icons](https://npm.io/package/react-icons.md) ^4.3.1
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.30
- [react-tooltip](https://npm.io/package/react-tooltip.md) ^4.2.21
- [@types/react-tooltip](https://npm.io/package/@types/react-tooltip.md) ^4.2.4

## Recent versions

- 0.2.0 (latest) — 2021-10-16
- 0.1.2 — 2019-03-25
- 0.1.1 — 2018-05-30
- 0.1.0 — 2018-05-30

## README

# React color bar

This is a color bar built to display data breakdown in a horizontal bar.

Inspired by color bar of `Payment calculator` in [Redfin](https://www.redfin.com).

![desktop](./imgs/redfin.png)

## Screenshot

![desktop](./imgs/demo.png)

## Install

```
$ npm i react-color-bar
```

## Demo

[Online Demo](https://joyjoy993.github.io/react-color-bar/)

Run local demo

```
$ npm install && npm run dev
```

Go to [http://127.0.0.1:8000](http://127.0.0.1:8000) to check to demo.

## Example

```
import React from 'react';
import { render } from 'react-dom';
import { FaApple } from 'react-icons/fa';
import ColorBar, { Data } from '../lib/ColorBar';
import './style.css';

function Demo() {
  const data: Data[] = [
    {
      value: 300,
      color: '#21bbce',
      tooltip: {
        text: 'interest is $300',
        props: {
          type: 'info',
          place: 'top',
        },
      },
      legend: {
        value: 300,
        label: 'interest',
        icon: <FaApple />,
      },
    }, {
      value: 200,
      color: '#4bc97d',
      tooltip: {
        text: 'tax is $200',
        props: {
          type: 'error',
          place: 'top',
        },
      },
      legend: {
        value: 200,
        label: 'tax',
        tooltip: {
          text: 'legend supports tooltip',
          props: {
            type: 'error',
            place: 'top',
          },
        },
      },
    }, {
      value: 100,
      color: '#eb5be1',
      tooltip: {
        text: 'insurance is $100',
        props: {
          type: 'success',
          place: 'top',
        },
      },
      legend: {
        value: 100,
        label: 'insurance',
      },
    },
     {
      value: 300,
      color: 'red',
      tooltip: {
        text: "I don't have legend",
        props: {
          type: 'success',
          place: 'bottom',
        },
      },
    },
  ];
  return (
    <div className="container">
      <h1>Demo of ColorBar</h1>
      <ColorBar data={data} />
    </div>
  );
}

render(<Demo />, document.getElementById('app'));

```

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