react-tiny-mask

Lightweight (<2KB gzipped) and dependency free mask input, created specifically for React (inspired by vue-the-mask)

Installation

yarn add react-tiny-mask

or

npm i react-tiny-mask

Usage

1import { InputMask } from 'react-tiny-mask';
2
3export const App = () => {
4  return <InputMask mask="+7 ### ###-##-##" />;
5};

Properties

Name	Required	Type	Default	Description
mask	true	string, Array<string>		Mask pattern
tokens	false	Object	{ '#': { pattern: /\d/ } }	Custom tokens for mask
component	false	ElementType		Custom component instead of regular <input />

mask

Mask pattern. Can be a string or an array of strings (dynamic mask).

1<InputMask mask="+7 ### ###-##-##" />

or

1<InputMask mask={['###-#', '####-#', '#####-#', '######-#']} />

tokens

By default, one token is defined:

1{ '#': { pattern: /\d/ } } // digits

For more complex masks, you can define your own tokens.

For example, Colors HEX:

1import { InputMask } from 'react-tiny-mask';
2
3const tokens = {
4  '#': {
5    pattern: /[0-9a-fA-F]/,
6  },
7};
8
9export const App = () => {
10  return <InputMask mask="######" tokens={tokens} />;
11};

For custom tokens you can define transform function, applied to a character before masking. For example, transforming letters to uppercase on input:

1import { InputMask } from 'react-tiny-mask';
2
3const tokens = {
4  '#': {
5    pattern: /[0-9a-fA-F]/,
6    transform: (value: string) => value.toUpperCase(),
7  },
8};
9
10export const App = () => {
11  return <InputMask mask="######" tokens={tokens} />;
12};

component

Property for integration with other input components:

1import { InputMask } from 'react-tiny-mask';
2
3const CustomInput = (props) => <input {...props} style={{ color: 'red' }} />;
4
5export const App = () => {
6  return <InputMask mask="+7 ### ###-##-##" component={CustomInput} />;
7};

Dynamic mask

Pass mask as array of strings to make it dynamic. The suitable mask will be chosen by length (smallest first):

1import { InputMask } from 'react-tiny-mask';
2
3const mask = ['###-#', '####-#', '#####-#', '######-#'];
4
5export const App = () => {
6  return <InputMask mask={mask} />;
7};