Nonvoluntary Professional Mangling

    react-input-mask-plus

    1.2.1 • Public • Published

    react-input-mask

    Build Status npm version npm downloads

    Yet another React component for input masking. Made with attention to UX. Compatible with IE8+.

    Demo

    Install

    npm install react-input-mask --save

    Also you can use it without a module bundler

    <!-- Load React first -->
    <script src="https://unpkg.com/react/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
    <!-- Will be exported to window.ReactInputMask -->
    <script src="https://unpkg.com/react-input-mask/dist/react-input-mask.min.js"></script>

    Properties

    mask : string

    Mask string. Default format characters are:
    9: 0-9
    a: A-Z, a-z
    *: A-Z, a-z, 0-9

    Any character can be escaped with a backslash. It will appear as a double backslash in JS strings. For example, a German phone mask with unremoveable prefix +49 will look like mask="+4\9 99 999 99" or mask={'+4\\9 99 999 99'}

    maskChar : string

    Character to cover unfilled parts of the mask. Default character is "_". If set to null or empty string, unfilled parts will be empty as in ordinary input.

    formatChars : object

    Defines format characters with characters as a keys and corresponding RegExp strings as a values. Default ones:

    {
      '9': '[0-9]',
      'a': '[A-Za-z]',
      '*': '[A-Za-z0-9]'
    }

    alwaysShowMask : boolean

    Show mask when input is empty and has no focus.

    Example

    import React from 'react';
    import InputMask from 'react-input-mask';
     
    class PhoneInput extends React.Component {
      render() {
        return <InputMask {...this.props} mask="+4\9 99 999 99" maskChar=" " />;
      }
    }

    Thanks

    Thanks to BrowserStack for the help with testing on real devices

    Install

    npm i react-input-mask-plus

    DownloadsWeekly Downloads

    11

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • le0nik