2.0.4 • Published 4 years ago

react-input-mask v2.0.4

Weekly downloads
305,594
License
MIT
Repository
github
Last release
4 years ago

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.

inputRef : function

Use inputRef instead of ref if you need input node to manage focus, selection, etc.

beforeMaskedValueChange : function

In case you need to implement more complex masking behavior, you can provide beforeMaskedValueChange function to change masked value and cursor position before it will be applied to the input. beforeMaskedValueChange receives following arguments: 1. newState (object): New input state. Contains value and selection fields. selection is null on input blur. Example: { value: '12/1_/____', selection: { start: 4, end: 4 } } 2. oldState (object): Input state before change. Contains value and selection fields. selection is null on input focus. 3. userInput (string): Raw entered or pasted string. null if user didn't enter anything (e.g. triggered by deletion or rerender due to props change). 4. maskOptions (object): Mask options. Example:

{
  mask: '99/99/9999',
  maskChar: '_',
  alwaysShowMask: false,
  formatChars: {
    '9': '[0-9]',
    'a': '[A-Za-z]',
    '*': '[A-Za-z0-9]'
  },
  permanents: [2, 5] // permanents is an array of indexes of the non-editable characters in the mask
}

beforeMaskedValueChange must return an object with following fields: 1. value (string): New value. 2. selection (object): New selection. If selection in newState argument is null, it must be null too.

Please note that beforeMaskedValueChange executes more often than onChange and must be pure.

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=" " />;
  }
}

Mask for ZIP Code. Uses beforeMaskedValueChange to omit trailing minus if it wasn't entered by user:

import React from 'react';
import InputMask from 'react-input-mask';

class Input extends React.Component {
  state = {
    value: ''
  }

  onChange = (event) => {
    this.setState({
      value: event.target.value
    });
  }

  beforeMaskedValueChange = (newState, oldState, userInput) => {
    var { value } = newState;
    var selection = newState.selection;
    var cursorPosition = selection ? selection.start : null;

    // keep minus if entered by user
    if (value.endsWith('-') && userInput !== '-' && !this.state.value.endsWith('-')) {
      if (cursorPosition === value.length) {
        cursorPosition--;
        selection = { start: cursorPosition, end: cursorPosition };
      }
      value = value.slice(0, -1);
    }

    return {
      value,
      selection
    };
  }

  render() {
    return <InputMask mask="99999-9999" maskChar={null} value={this.state.value} onChange={this.onChange} beforeMaskedValueChange={this.beforeMaskedValueChange} />;
  }
}

Thanks

Thanks to BrowserStack for the help with testing on real devices

dsny-component-library@plurall/readerbaseuibehtarino@globalsoftba/bede-starterkitdilicorp-uidefi-finder-calculatorxbs-componentscf-storybookdatacwebappscra-datacwebappscra-datacwebapss@neggi/baseuisatrate-testaphrodite-reactcalindra-componentsassociate-appdivanru-ui@divanru/uireact-interactive-payment-formdynamic-grid-avanade@open-raven/react-styleguideams-storybook-libraryquantic-uimymoria-uiconquista-componentes@andrei.ciulpan/jt-design@andrei.ciulpan/jt-design-tempgha-componentssand-product-configsand-migration-plannershaper-reactcaec-admin-webmaroom-new-uikoteyka-ui-kitplaace-storybook@egvelho/next-account@devapi/design-system@orchestra/orxapi.widgets.framework@schoonlabs/blockspuil3.0@reverb-ui/testwgt-ui@-taxi-parks-ui/input-phonecomponents_pottencial2.0bsr-ui-kittest-widget-prodingosinvest-react-ui-kitingosinvest-react-ui-kit-testgpb-uikit-packles-reusablesmultisys-design-system4game-uicomponents_pottencialkushkiconnectvtfacit-litemui-uitemp-connect-ui-acceltest-connect-bundlerbmd-components@sana-ru/provider-search-rendervibo-uijkc-inputreact-webpack-babel-sass-boilerplateinv-us-smileviewtest@infinitebrahmanuniverse/nolb-react-in@nexatlas-os/nexds-web@compassdigital/compassdigital.components.distilrboompay-react-sdkfarshid-kit-testfarshid-kit-test-123@raphaelcamar/my-financial-storybookreact-mui-form-generatorreact-time-picker1rharuow-adminemdkb-kitemdkb-kit-1month-picker-inputidon@academysports/ui-component-library@everything-registry/sub-chunk-2561react-phone-numbersreact-components-test-mlsmartjkc@informed-iq/stipassistant-sdkjkc-inputs@gipsyy-alex/arara-payments-components-reactreact-custom-ui55@nstseek/react-formsui-food2cntl-components-ui@amenify/web-components@andromedadev/ui@andigeorgescu/react-form-builder@anderson.tec12/dorotech-uiawing-library@apass/input-date-time@apass/input-masked@apkawa/react-phone-inputbaseui-oms
3.0.0-alpha.2

4 years ago

3.0.0-alpha.1

4 years ago

3.0.0-alpha.0

5 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

2.0.0-beta.4

6 years ago

2.0.0-beta.3

6 years ago

2.0.0-beta.2

6 years ago

2.0.0-beta.1

6 years ago

2.0.0-beta.0

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

1.0.0-beta.1

7 years ago

0.9.1

7 years ago

0.9.0

7 years ago

0.8.2

7 years ago

0.8.1

7 years ago

0.8.0

7 years ago

0.7.9

7 years ago

0.7.8

7 years ago

0.7.7

7 years ago

0.7.6

7 years ago

0.7.5

8 years ago

0.7.4

8 years ago

0.7.3

8 years ago

0.7.2

8 years ago

0.7.1

8 years ago

0.7.0

8 years ago

0.6.8

8 years ago

0.6.7

8 years ago

0.6.6

8 years ago

0.6.5

8 years ago

0.6.4

8 years ago

0.6.3

8 years ago

0.6.2

8 years ago

0.6.1

8 years ago

0.6.0

8 years ago

0.5.10

8 years ago

0.5.9

8 years ago

0.5.8

8 years ago

0.5.7

8 years ago

0.5.6

8 years ago

0.5.5

8 years ago

0.5.4

8 years ago

0.5.3

8 years ago

0.5.2

8 years ago

0.5.1

8 years ago

0.5.0

8 years ago

0.4.1

8 years ago

0.4.0

8 years ago

0.3.3

8 years ago

0.3.2

8 years ago

0.3.1

8 years ago

0.3.0

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.4

9 years ago

0.1.3

9 years ago

0.1.2

9 years ago

0.1.1

9 years ago

0.1.0

9 years ago

0.0.17

9 years ago

0.0.16

9 years ago

0.0.15

9 years ago

0.0.14

9 years ago

0.0.13

9 years ago

0.0.12

9 years ago

0.0.11

9 years ago

0.0.10

9 years ago

0.0.9

9 years ago

0.0.8

9 years ago

0.0.7

9 years ago

0.0.6

9 years ago

0.0.5

9 years ago

0.0.4

9 years ago

0.0.3

9 years ago

0.0.2

9 years ago

0.0.1

9 years ago