React Quantity Picker

# Installation

NPM

$ npm install --save react-qty-picker

Yarn

$ yarn add react-qty-picker

# Getting started

Importing the package

import { QuantityPicker } from 'react-qty-picker';

Usage

<QuantityPicker />

# Props

We’ve already seen how we can install and use the package. Now we will see a set of properties that are included with react quantity picker component package.

Min

The min prop specifies the minimum value for <QuantityPickecr /> component.

<QuantityPicker min={4} />

Max

The max prop specifies the maximum value for <QuantityPickecr /> component.

<QuantityPicker max={30}/>

Value

The value prop specifies the default value of a <QuantityPicker /> component. Same with value attribute of <input /> element in HTML

<QuantityPicker value={5} />

---

# Get Value

After you finished setting up all component properties, you will need to get the value of the quantity picker component. In order to get the value, I have made an onChange callback that returns the value of the quantity picker every time it is updated. Here is how you can get.

<QuantityPicker onChange={(value)=>{ // here value is the final update value of the component
                     console.log(value); 
                   }}/>

You can also define your own function to be called every time the value is updated

const getPickerValue = (value) =>{
    console.log(value) // Here you can get the value of the Quantity picker
}
.
.
.
<QuantityPicker onChange={getPickerValue}/>

# Styling props

React quantity picker has some stylings.

Width

The width attribute specifies the width of the <QuantityPicker /> component.

<QuantityPicker width='15rem'/>

Here I used the REM unit. 1rem unit equals the font size of the HTML element (which for most browsers has a default value of 16px). Although you can use other units. But I recommend using rem.

Smooth

If you are interested in a smoothy and shadowy layouts this one is best for you. Only by adding  smooth prop, you will get a beautiful react quantity picker component.

<QuantityPicker smooth/>

If you like my work you can…

You can view GitHub repo. give a star if you like it.

See it on NPM