marcocesarato / react-native-input-spinner

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.
https://marcocesarato.github.io/react-native-input-spinner/
GNU General Public License v3.0
414 stars 34 forks source link

Add a value formatter prop. #92

Closed robinmacharg closed 1 year ago

robinmacharg commented 1 year ago

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`;
    }}
/>