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