Steppercomponent
component
A component used for increasing or decreasing quantities.
Anchor to stepperStepper
Anchor to initialValue
initialValue
number
required
The initial value of the stepper.
Anchor to onValueChanged
onValueChanged
(value: number) => void
required
A callback when the value of the stepper changes.
Anchor to disabled
disabled
boolean
Default: false
Whether the field can be modified.
Anchor to maximumValue
maximumValue
number
Use to set the maximum value of the stepper.
Anchor to minimumValue
minimumValue
number
Default: 1
Use to set the minimum value of the stepper.
Anchor to value
value
number
Only use this field if you wish to override the internal state of this component.
Was this section helpful?
Stepper
import React, { useState } from 'react';
import { Screen, reactExtension, Text, Stepper, ScrollView } from '@shopify/ui-extensions-react/point-of-sale';
const SmartGridModal = () => {
const [value, setValue] = useState(4);
return (
<Screen name='stepper' title='Stepper'>
<ScrollView>
<Stepper initialValue={value} onValueChanged={setValue} />
<Text>{value}</Text>
</ScrollView>
</Screen>
);
}
export default reactExtension('pos.home.modal.render', () => {
return <SmartGridModal />
})
Preview
