Needlessly Promiscuous, Modularize!

    react-native-imask

    6.4.2 • Public • Published

    React Native IMask Plugin

    react-native-imask

    npm version License: MIT

    Read this before using

    I can't say that this plugin is production ready, use it on your own risk. React Native Textinput behavior differs from html input, varies by platform and contains several bugs (1, 2), so some things are not possible to implement. Any PRs are welcomed.

    Install

    npm install react-native-imask

    Masked TextInput Example

    import {IMaskTextInput} from 'react-native-imask';
    
    <IMaskTextInput
      mask={Number}
      radix="."
      value="123"
      unmask={true} // true|false|'typed'
      onAccept={
        // depending on prop above first argument is
        // `value` if `unmask=false`,
        // `unmaskedValue` if `unmask=true`,
        // `typedValue` if `unmask='typed'`
        (value, mask) => console.log(value)  // probably should update state
      }
      // ...and more mask props in a guide
    
      // other TextInput props
      editable={true}
      style={{
        height: 40,
        width: '100%',
        borderColor: 'gray',
        borderWidth: 1
      }}
    />

    Extend Existing Components

    import {IMaskNativeMixin} from 'react-native-imask';
    
    // use `inputRef` to get reference for our custom text input component
    const InputComponent = ({inputRef, ...props}) => (
      <TextInput
        ref={inputRef}
        {...props}
      />
    );
    
    // wrap component with IMaskNativeMixin
    const IMaskTextInput = IMaskNativeMixin(InputComponent);
    
    // use MaskedComponent
    <IMaskTextInput
      mask="0000"
      // ...other props
    />

    More options see in a guide.

    Many Thanks to

    @Yordis Prieto

    Support Development

    Paypal

    Install

    npm i react-native-imask

    DownloadsWeekly Downloads

    455

    Version

    6.4.2

    License

    MIT

    Unpacked Size

    38.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • unmanner