# funnel-react

> A very small library to create a modern and beautiful funnel

Latest version **0.0.6** (published 2019-12-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install funnel-react
pnpm add funnel-react
yarn add funnel-react
bun add funnel-react
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2019-12-24 |
| First published | 2019-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 726.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Xavier Gonzalez |
| Maintainers | xavivzla |
| Keywords | node, npm, react-component, react, react.js, funnel, yarn |

## Links

- npm: https://www.npmjs.com/package/funnel-react
- Repository: https://github.com/xavivzla/Funnel-React
- Homepage: https://github.com/xavivzla/Funnel-React#readme
- Issues: https://github.com/xavivzla/Funnel-React/issues
- npm.io page: https://npm.io/package/funnel-react

## Dependencies (1)

- [react-jss](https://npm.io/package/react-jss.md) ^10.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.6 (latest) — 2019-12-24
- 0.0.5 — 2019-12-19
- 0.0.4 — 2019-12-17
- 0.0.3 — 2019-12-16
- 0.0.2 — 2019-12-16
- 0.0.1 — 2019-12-04

## README

<p align="center">
  <a href="https://github.com/xavivzla" rel="noopener" target="_blank"><img width="150" src="https://raw.githubusercontent.com/xavivzla/Funnel-React/dev/logo.png" alt="Funnel-react logo"></a></p>
</p>

<h1></h1>

<div align="center">

[![NPM](https://img.shields.io/npm/v/funnel-react.svg)](https://www.npmjs.com/package/funnel-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

</div>

<p align="center">
  <a href="https://github.com/xavivzla" rel="noopener" target="_blank"><img width="600" src="https://raw.githubusercontent.com/xavivzla/Funnel-React/dev/funnel.gif" alt="Funnel-react logo"></a></p>
</p>

## Install

```bash
npm install --save funnel-react
```

> or

```bash
yarn add funnel-react
```

## Usage

```jsx

import { Funnel } from 'funnel-react';

```

##Simple example

```jsx

<Funnel
  height={252}
  colors={{
    graph: [ '#1890FF', '#BAE7FF' ],
    percent: 'red',
    label: 'yellow',
    value: 'orange'
  }}
  valueKey='quantity'
  width={800}
  data={data} />

```

##Render prop example

```jsx
const data = [
  {
      "label": "Aceptados",
      "quantity": 135
  },
  ...{}
]

  <Funnel
  labelKey='label'
  height={252}
  colors={{
    graph: [ '#1890FF', '#BAE7FF' ], // array or string : 'red' || '#666'
    percent: 'red',
    label: 'yellow',
    value: 'orange'
  }}
  valueKey='quantity' 
  width={800}
  displayPercent={true}
  data={data} />

```

| props          | Type            | Default Value          | Options      |
| -------------  |:--------------: | :--------------------: | :----------: |
| labelKey       | string          |                        |              |
| colors         | object          |                        |              |
| valueKey       | string          |                        |              |
| width          | number          | container width        |              |
| displayPercent | boolean         | false                  | false / true |
| data           | array           |                        |              |

## License

MIT © [xavivzla](https://github.com/xavivzla)

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