React Tutorials

React Js Set Pattern Masking in Input Control Tutorial

In this tutorial, we will teach you how to apply pattern masking in input controls in React js app using the iMask package.

First, we would like to tell you what pattern masking is? How it may amplify the form validation experience from the user’s point of view.

Generically, form validation is added to the input controls to prevent users from sending wrong information. Usually, a user enters the information in the input fields, click on the submit button to send the data to the server.

Typically, if the information doesn’t match the validation criteria, we show them errors and let them know what needs to be corrected. This process is traditional and validates form info on the client-side or seldom on the server-side.

In the server-side scenario, we may lose some bandwidth, which costs site owners a few more bucks. What if we told you? You can add validation and stop the user from entering wrong information while entering info into the input fields.

Such functionality is called input control pattern masking, and this guide will describe how to implement pattern masking in form fields in React. To add the pattern masking, we will use the iMask package.

Here are some features that you get with this ultimate package:

  • get and set value and unmasked value easily
  • no external dependencies
  • supports overwrite mode
  • supports all major browsers and *IE11+
  • supports web components
  • supports contenteditable
  • RegExp mask
  • Function mask
  • Number mask (integer and decimal support)
  • Date mask (with various format support and autofix mode)
  • Dynamic/on-the-fly mask
  • Pattern mask

Check out more features here.

How to Pattern Mask React Form Input Controls using iMask JavaScript Plugin

  • Step 1: Create React Application
  • Step 2: Install iMask JavaScript Package
  • Step 3: Add Bootstrap Package
  • Step 4: Implement Pattern Masking
  • Step 5: Register Component in App Js
  • Step 6: Start React Project

Create React Application

We know most of you know the process of creating the React application. However, the given instruction is for those who have difficulty setting up the new React project.

Firstly, open the terminal window integrated in your code editor or if you want open it separately.

There after type the command on the terminal, execute the command to build the new app.

npx create-react-app coffee-cup

Now, move into the application folder.

cd coffee-cup

Install iMask JavaScript Package

iMask JavaScript package exponentially enhances the pattern masking in React to install the plugin.

You make sure to type the command on the terminal similarly execute the command.

npm i react-imask

Add Bootstrap Package

In this step, we will show you to add Bootstrap library in React project.

This plugin is awesome when it comes to design or develop user interface components.

npm install bootstrap

Next, open the App.js there you require to import the bootstrap CSS.

import 'bootstrap/dist/css/bootstrap.min.css'

Implement Pattern Masking in Email, Date, Range Number, Phone

The following code example illustrates the process of adding pattern masking in input controls. The IMaskInput module has to be imported before the InputControlForm class.

Add the mask=”” property in Email, Date, Range Number, and Phone input controls.

In the components/ folder you have to generate the InputControlForm.js file. There after, put the given code example in the file.

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

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

export default function InputControlForm() {
  return (
    <div className="container mt-5">
      <form>
        <h2>React Input Control Pattern Masking Example</h2>

        <div className="form-group mb-3">
          <label className="mb-1">Phone Mask:</label>
          <IMaskInput
            className="form-control"
            mask={ContactNumberMask}
            placeholder="+21(6951)46-6542"
            onAccept={(value, mask) => console.log(value, mask)}
            value=""
          />
        </div>

        <div className="form-group mb-3">
          <label className="mb-1">Range Number Mask:</label>
          <IMaskInput
            className="form-control"
            mask={Number}
            placeholder="Number 80 - 1000"
            min={80}
            max={1000}
            onAccept={(value, mask) => console.log(value, mask)}
            value=""
          />
        </div>

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

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

Register Component in App Js

If you try to see Inside your project directory, you will see the src/App.js file, which is where you have to go next.

After getting into the file, you need to register the form component, which will make it available throughout the app.

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

export default function App() {
  return (
    <div className="App">
      <InputControlForm />
    </div>
  )
}

Start React Project

To execute the code example requires starting the React application’s development server.

We are going to present to you simple command that runs the app development server relentlessly.

npm start

Right after you evoke the server, command line displays two urls.

You can either of the url to view the app on the browser.

http://localhost:3000

Conclusion

This guide took us on a journey where we decoded pattern masking in React. We, layer by layer, unfolded the secrets to integrate the pattern masking feature in form fields. Also, we threw light on regular validation and pattern masking validation mechanisms.

However, if we skipped something knowingly or unknowingly, kindly do let us know.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Router DOM 6 Fetch Current URL / Pathname Tutorial

If you want to learn how to get the current route's name, component pathname or…

2 days ago

React Js Hide & Show with React Bootstrap Collapse Tutorial

React show and hide example. In this tutorial, we will show you how to step…

5 days ago

How to Integrate Tabs in React Js with React Bootstrap

Tabs are one of the best UI elements for displaying multiple contents in a single…

1 week ago

How to Build Toast Component in React Js with Bootstrap

In this tutorial, we will learn how to create a toast notification component in the…

2 weeks ago

React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to…

2 weeks ago

React Build Counter using useReducer Hook Tutorial

React js counter using the useReducer hook example. In this post, we will learn how…

2 weeks ago