Quantity
component
A component with increment and decrement buttons for adjusting quantities.
Was this section helpful?
QuantitySelector
import {QuantitySelector} from '@shopify/shop-minis-react'
export default function MyComponent() {
const handleQuantityChange = newQuantity => {
console.log('Quantity changed to:', newQuantity)
}
return (
<QuantitySelector
quantity={1}
onQuantityChange={handleQuantityChange}
maxQuantity={10}
/>
)
}
examples
QuantitySelector
import {QuantitySelector} from '@shopify/shop-minis-react' export default function MyComponent() { const handleQuantityChange = newQuantity => { console.log('Quantity changed to:', newQuantity) } return ( <QuantitySelector quantity={1} onQuantityChange={handleQuantityChange} maxQuantity={10} /> ) }
Preview
Anchor to examplesExamples
QuantitySelector configurations and states
Anchor to example-basic-quantity-selectorBasic quantity selector
Quantity selector with a max value
Anchor to example-a-more-custom-rangeA more custom range
Quantity selector with custom min values
Anchor to example-disabled-stateDisabled state
Disabled quantity selector
Was this section helpful?
Basic quantity selector
import {QuantitySelector} from '@shopify/shop-minis-react'
export default function MyComponent() {
const handleQuantityChange = newQuantity => {
console.log('Quantity changed to:', newQuantity)
}
return (
<QuantitySelector
quantity={1}
onQuantityChange={handleQuantityChange}
maxQuantity={10}
/>
)
}
examples
Basic quantity selector
description
Quantity selector with a max value
import {QuantitySelector} from '@shopify/shop-minis-react' export default function MyComponent() { const handleQuantityChange = newQuantity => { console.log('Quantity changed to:', newQuantity) } return ( <QuantitySelector quantity={1} onQuantityChange={handleQuantityChange} maxQuantity={10} /> ) }A more custom range
description
Quantity selector with custom min values
import {QuantitySelector} from '@shopify/shop-minis-react' export default function MyComponent() { const handleQuantityChange = newQuantity => { console.log('Quantity changed to:', newQuantity) } return ( <QuantitySelector quantity={5} onQuantityChange={handleQuantityChange} minQuantity={2} maxQuantity={50} /> ) }Disabled state
description
Disabled quantity selector
import {QuantitySelector} from '@shopify/shop-minis-react' export default function MyComponent() { const handleQuantityChange = newQuantity => { console.log('Quantity changed to:', newQuantity) } return ( <QuantitySelector quantity={3} onQuantityChange={handleQuantityChange} maxQuantity={10} disabled /> ) }