React Js Input Pattern Masking with iMask Js Tutorial

A comprehensive guide will help you understand how to implement pattern masking in form input controls within React app. To add the patterned masking in React, we will use the iMask JavaScript plugin in React application.

In form validation, every input control is validated. A form validation process is genuinely refraining from gathering wrong information. If validation is not implemented correctly, it may end up your inbox filled with reluctant or spammy information.

What if we told you a new paradigm in form validation?

Input pattern masking – In form input controls, we can effortlessly yet eloquently add pattern masking. You can add a mask on the phone, number, date, email input controls.

This input masking feature will stop site visitors from submitting wrong information. It is as easy as pie, even it makes the form submission process more conventional.

We will use the iMask library to add a mask on form values in React. The iMask js allows you to validate the form data on the go in conjunction with the predefined formats.

The iMask is a vanilla JavaScript input mask package. It offers tons of features that give you robust control over form input values.

It doesn’t just support input masking in React, but it also supports other Vue, Angular, React Native, and Svelte frameworks.

How to Integrate Pattern Mask in Phone, Number, Date, Email Inputs in React Js

  • Step 1: Download New React Project
  • Step 2: Install Bootstrap Library
  • Step 3: Add iMask Package in React
  • Step 4: Build Form Component
  • Step 5: Register Form Component
  • Step 6: Invoke React Application

Download New React Project

First, open the command prompt and get ready to evoke the installation process of the new React application.

Just type the below command and hit enter.

You may jump on to a subsequent step if the app already exists.

npx create-react-app hello-web

Wait until the app is utterly installed, thereafter get into the application directory.

cd hello-web

Install Bootstrap Library

In the frontend development realm, it is always good to have acquaintance with CSS.

However, if you are trying your hand newly and willing to know the secret to create the UI at a blazingly fast speed.

So, You must try out Bootstrap. We install this package to build the UI at a rapid pace.

npm install bootstrap

It hasn’t been finished yet, to make the Bootstrap work in your React project.

Ensure that you add or import the bootstrap CSS in primary App.js template.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'

export default function App() {
  return (
    <div>
    </div>
  )
}

Add iMask Package in React

Up until now, you have created and respectively entered into the app. In this step, you will see how to install the iMask js package into the React app.

We assume you are into the terminal window, copy the given command, paste onto the command-line tool and execute it.

npm i react-imask

Build Input Pattern Mask Component

Ever since we are using it, we fell in love of every aspect of this eloquent framework. In React, things are pretty easy to manage, all hail to its creators.

Let us try to comprehend the process of adding pattern masking in form input controls.

You have to make a new MaskForm.js file, in general such type of files, which handle particular feature or functionality is called by the name of component.

You have to append the following code in component/MaskForm.js file.

import React from 'react'
import { IMaskInput } from 'react-imask'

const PhoneContactMask = '+{00}(0000)00-0000'
const EmailAddMask = /^\S*@?\S*$/

export default function MaskForm() {
  return (
    <div className="mt-3">
      <form>
        <h2>React Add Pattern Mask in Inputs Example - RemoteStack</h2>

        <div className="form-group mb-4">
          <label>
            <strong>Phone Mask</strong>
          </label>
          <IMaskInput
            className="form-control"
            placeholder="+31(8787)75-9513"
            mask={PhoneContactMask}
            onAccept={(value, mask) => console.log(value, mask)}
            value=""
          />
        </div>

        <div className="form-group mb-4">
          <label>
            <strong>Number (Range From-To) Mask</strong>
          </label>
          <IMaskInput
            className="form-control"
            placeholder="Number 50 - 1500"
            mask={Number}
            min={50}
            max={1500}
            onAccept={(value, mask) => console.log(value, mask)}
            value=""
          />
        </div>

        <div className="form-group mb-4">
          <label>
            <strong>Date Mask</strong>
          </label>
          <IMaskInput
            className="form-control"
            placeholder="Date"
            mask={Date}
            min={new Date(2018, 0, 1)}
            max={new Date(2021, 0, 1)}
            onAccept={(value, mask) => console.log(value, mask)}
          />
        </div>

        <div className="form-group mb-4">
          <label>
            <strong>Email Mask</strong>
          </label>
          <IMaskInput
            className="form-control"
            placeholder="Email"
            mask={EmailAddMask}
            onAccept={(value, mask) => console.log(value, mask)}
          />
        </div>
      </form>
    </div>
  )
}

We have blatantly added the pattern mask in Phone, Number, Date, and Email form Input fields with iMask js library.

Register Form Component

The following process is to diligently import and call the new component in the App.js template.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import MaskForm from './components/MaskForm'

export default function App() {
  return (
    <div className="container mt-2">
      <MaskForm />
    </div>
  )
}

Therefore, go ahead, copy the given code and insert the provided code with delicacy into the suggested locus.

Invoke React Application

Most probably, you have followed every instruction with utmost attentiveness.

Subsequently, make sure to start the React app; you can do it with the suggested command.

npm start

Even though the app starts automatically on the browser, if somehow it doesn’t.

Copy the above URL, put it into the address bar and hit enter.

http://localhost:3000

Here is how the output appears on the browser:

React Js Integrate Pattern Mask in Input Fields with iMask Tutorial

Summary

We displayed the instructions for incorporating pattern masking in form input fields in React application with so much persistence.

This tutorial might be a boon for those just getting started in React and who have no prior knowledge of pattern masking and the iMask JavaScript library.

However, you may go with the conventional method where the user sees the error messages after providing the wrong values. But this process can be made better by the input control masking.

This quick React guide will make your development journey facile, as well as remove all the conjugated obstacles from your learning journey.