An extensible input number spinner component for react-native highly customizable. This component enhance a text input for entering numeric values, with increase and decrease buttons.
This change adds an optional formatter prop to the <InputSpinner/> component to allow users to better control the output. This can be useful in cases where direct numeric output is not suitable. Examples include e.g. converting time (seconds) to minutes and seconds, outputting non-decimal values (octal, hex etc), or cycling through enum values ('first', 'second', 'third'), all while maintaining the underlying numeric value.
Usage (Typescript):
<InputSpinner
max={1000}
min={0}
step={5}
value={seconds}
formatter={(value: string) => {
let totalSeconds = parseInt(value);
let seconds = totalSeconds % 60;
let minutes = Math.floor(totalSeconds / 60);
return `${minutes}m ${seconds}s`;
}}
/>
This change adds an optional
formatter
prop to the<InputSpinner/>
component to allow users to better control the output. This can be useful in cases where direct numeric output is not suitable. Examples include e.g. converting time (seconds) to minutes and seconds, outputting non-decimal values (octal, hex etc), or cycling through enum values ('first', 'second', 'third'), all while maintaining the underlying numeric value.Usage (Typescript):