react-imask

What is react-imask?

The react-imask package is a versatile input masking library for React applications. It allows developers to create input fields with predefined formats, ensuring that user input adheres to specific patterns. This is particularly useful for forms that require inputs like phone numbers, dates, credit card numbers, and more.

What are react-imask's main functionalities?

Basic Input Masking

This feature allows you to create a basic input mask for phone numbers. The mask ensures that the input follows the pattern [phone].

import React from 'react';
import IMask from 'react-imask';

function PhoneInput() {
  return (
    <IMask.Input
      mask="[phone]"
      placeholder="[phone]"
    />
  );
}

export default PhoneInput;

Dynamic Masking

This feature demonstrates dynamic masking, where the input mask changes based on the input value. For example, it changes the mask for American Express card numbers.

import React, { useState } from 'react';
import IMask from 'react-imask';

function DynamicMaskInput() {
  const [mask, setMask] = useState('0000 0000 0000 0000');

  return (
    <IMask.Input
      mask={mask}
      placeholder="Enter your card number"
      onAccept={(value, mask) => {
        if (value.startsWith('34') || value.startsWith('37')) {
          setMask('0000 000000 00000'); // American Express
        } else {
          setMask('0000 0000 0000 0000'); // Other cards
        }
      }}
    />
  );
}

export default DynamicMaskInput;

Custom Masking with Regular Expressions

This feature allows you to use regular expressions for custom input masking. In this example, the input only accepts lowercase letters.

import React from 'react';
import IMask from 'react-imask';

function RegexMaskInput() {
  return (
    <IMask.Input
      mask={/^[a-z]*$/}
      placeholder="Enter lowercase letters only"
    />
  );
}

export default RegexMaskInput;

Other packages similar to react-imask

react-text-mask

react-text-mask is another popular library for input masking in React. It provides similar functionality to react-imask, allowing developers to create masked input fields. However, react-imask offers more flexibility with dynamic and custom masks.

cleave.js

cleave.js is a JavaScript library for formatting input fields. It supports a wide range of input formats, including credit card numbers, phone numbers, and dates. While cleave.js is not React-specific, it can be easily integrated into React applications. Compared to react-imask, cleave.js is more focused on formatting rather than masking.

inputmask

inputmask is a versatile library for creating input masks in web applications. It supports a variety of input types and can be used with different frameworks, including React. While inputmask offers similar functionality to react-imask, it may require more configuration for complex masks.

README

React IMask Plugin

react-imask

Install

npm install react-imask

Mask Input Example

import { useRef } from 'react';
import { IMaskInput } from 'react-imask';

// use ref to get access to internal "masked = ref.current.maskRef"
const ref = useRef(null);
const inputRef = useRef(null);
<IMaskInput
  mask={Number}
  radix="."
  value="123"
  unmask={true} // true|false|'typed'
  ref={ref}
  inputRef={inputRef}  // access to nested input
  // DO NOT USE onChange TO HANDLE CHANGES!
  // USE onAccept INSTEAD
  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)
  }
  // ...and more mask props in a guide

  // input props also available
  placeholder='Enter number here'
/>

Extend Existing Components

import { IMaskMixin } from 'react-imask';

// extend style component
const StyledInput = styled.input`
  color: green;
`;

const MaskedStyledInput = IMaskMixin(({inputRef, ...props}) => (
  <StyledInput
    {...props}
    innerRef={inputRef}  // bind internal input (if you use styled-components V4, use "ref" instead "innerRef")
  />
));

<MaskedStyledInput
  mask={Number}
  radix="."
  onAccept={(value, mask) => console.log(value)}
  // ...and more mask props in a guide

  // ...other styled props
/>

More options see in a guide.

Using hook

import { useState } from 'react';
import { useIMask } from 'react-imask';

function IMaskWithHook () {
  const [ opts, setOpts ] = useState({ mask: Number });
  const {
    ref,
    maskRef,
    value,
    setValue,
    unmaskedValue,
    setUnmaskedValue,
    typedValue,
    setTypedValue,
  } = useIMask(opts, /* optional {
    onAccept,
    onComplete,
    ref,
    defaultValue,
    defaultUnmaskedValue,
    defaultTypedValue,
  } */);
  
  return (
    <input ref={ref} />
  );
}