DEV Community

xavier gonzalez
xavier gonzalez

Posted on

React Funnel

Hi, I want to share a library that I am building. If you find a mistake I would like to be told to improve the library and as a developer.

Funnel-react logo

Funnel-react logo

Install

npm install --save funnel-react
Enter fullscreen mode Exit fullscreen mode

or

yarn add funnel-react
Enter fullscreen mode Exit fullscreen mode

Test Library

Edit React-Funnel

Usage


import { Funnel } from 'funnel-react';

Enter fullscreen mode Exit fullscreen mode

Simple example


<Funnel
  height={252}
  colors={[ '#1890FF', '#BAE7FF' ]}
  valueKey='quantity'
  width={800}
  data={data} />

Enter fullscreen mode Exit fullscreen mode

Render prop example

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

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

Enter fullscreen mode Exit fullscreen mode
props Type Default Value Options
labelKey string
colors array or string ['#FF4589', '#FF5050']
valueKey string
width number container width
displayPercent boolean false false / true
data array

License

MIT © xavivzla

Discussion (5)

Collapse
dance2die profile image
Sung M. Kim

Could you share what the library about?

Normally README's are enough but can't figure out what it is for... 🤔

Collapse
xavivzla profile image
xavier gonzalez Author

add the readme, where it is explained a little better :)

Collapse
dance2die profile image
Sung M. Kim

Thank you for the updated post, Xavier~

What I meant was that the README doesn't seem to explain what the library is for. I see a funnel but unsure of the purpose...

Thread Thread
xavivzla profile image
xavier gonzalez Author

thanks. I will improve the documentation. and I tell you when I finish it to see if you can understand. : D

Collapse
xavivzla profile image
xavier gonzalez Author

Thanks... :)