Spread the love

# Installation


$ npm install --save react-qty-picker


$ yarn add react-qty-picker

# Getting started

Importing the package

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


<QuantityPicker />
Calling quantity picker on our project
Boom! We’ve successfully called the component into our project

# 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.


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

<QuantityPicker min={4} />


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

<QuantityPicker max={30}/>


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

<QuantityPicker value={5} />
react quantity picker default value
Quantity picker with default 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

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.


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

<QuantityPicker width='15rem'/>
quantity button with width
React quantity picker with width of 15 rem

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.


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/>
smooth quantity picker
smooth react quantity picker component

If you like my work you can…

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

See it on NPM


john · July 6, 2022 at 12:23 pm

why can’t i type the value in the input field?

    Abdulhakim Zeinu · July 6, 2022 at 10:15 pm

    In order to give you a detailed explanation, paste the block of code you used.

Leave a Reply

Your email address will not be published. Required fields are marked *