0.3.3 • Published 10 months ago

@alexzunik/react-native-money-input v0.3.3

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

react-native-money-input

Fully native money input for React Native

Example

iOSAndroid
iOS DemoAndroid Demo

Installation

yarn add @alexzunik/react-native-money-input

npx pod-install

Usage

import { MoneyTextInput } from '@alexzunik/react-native-money-input';

// ...

const Component = () => {
  const [value, setValue] = React.useState<string>();
  return (
    <MoneyTextInput
        value={value}
        onChangeText={(formatted, extracted) => {
          console.log(formatted) // $1,234,567.89
          console.log(extracted) // 1234567.89
          setValue(extracted)
        }}
        prefix="$"
        groupingSeparator=","
        fractionSeparator="."
      />
  )
}

Props

interface MaskOptions {
  /**
   * Separator between integer number groups
   *
   * Default: `space`
   */
  groupingSeparator?: string;
  /**
   * Separator between integer and fraction parts.
   * Will be ignored if you set maximumFractionalDigits = 0
   *
   * Default: system separator
   */
  fractionSeparator?: string;
  /**
   * Prefix before number.
   *
   * For example: if prefix = `$` input will be `$1,234.43`
   *
   * Default: `undefined`
   */
  prefix?: string;
  /**
   * Suffix after number.
   *
   * For example: if suffix = ` EUR` input will be `1 234,43 EUR`
   *
   * Default: `undefined`
   */
  suffix?: string;
  /**
   * Maximum length in integer part, exclude separators
   *
   * Default: `Infinity`
   */
  maximumIntegerDigits?: number;
  /**
   * Maximum length in fractional part
   *
   * Default: `2`
   */
  maximumFractionalDigits?: number;
  /**
   * Minimum numeric value.
   * It will be set to input if user enters value less than minValue
   */
  minValue?: number;
  /**
   * Maximum numeric value.
   * It will be set to input if user enters value greater than maxValue
   */
  maxValue?: number;
}

Testing

in order to load mocks provided by react-native-money-input add following to your jest config in jest.config.json:

"setupFiles": ["./node_modules/@alexzunik/react-native-money-input/jest/setup.js"]

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

0.3.2

10 months ago

0.3.3

10 months ago

0.3.0

11 months ago

0.2.1

11 months ago

0.2.0

11 months ago

0.3.1

11 months ago

0.1.5

1 year ago

0.1.4

1 year ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago