Маска для телефона react js

More great articles from LogRocket:

• Don’t miss a moment with The Replay, a curated newsletter from LogRocket
• Learn how LogRocket’s Galileo cuts through the noise to proactively resolve issues in your app
• Use React’s useEffect to optimize your application’s performance
• Switch between multiple versions of Node
• Discover how to animate your React app with AnimXYZ
• Explore Tauri, a new framework for building binaries
• Compare NestJS vs. Express.js

Cut through the noise of traditional React error reporting with LogRocket

LogRocket
is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.

LogRocket
automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.

Focus on the React bugs that matter —
try LogRocket today.

Introduction

An input mask is a string expression that constrains user input.

In this article, we’ll look at how to use an input mask to enforce input format in a React app.

Getting Started

We can add an input that enforces an input mask in a React app.

The react-input-mask package makes this very easy.

First, we run:

npm install react-input-mask --save

to install the package in our React project.

Then we can use it by adding it component provided by the package and specify the format of the input that we want to accept.

For instance, if we want to incorporate an input that takes a North American phone number, then we can write:

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

export default function App() {
  return (
    <div className="App">
      <InputMask mask="+1(999) 999-9999" maskChar=" " />
    </div>
  );
}

The mask prop has the input mask.

And the maskChar has the character we want to cover over the unfilled parts of a mask.

We can also use the formatChars prop to specify the format characters with the characters as keys and the corresponding regex string as a value.

alwaysShowMask is a boolean prop to specify whether we want to show the mask when input is empty and has no focys.

inputRef prop lets us specify the input ref of the input element so that we can manage focus, selection, etc.

We can use the formatChars prop as follows:

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

export default function App() {
  return (
    <div className="App">
      <InputMask
        formatChars={{
          "9": "[0-9]",
          a: "[A-Za-z]",
          "*": "[A-Za-z0-9]"
        }}
        mask="+1(999) 999-9999"
        maskChar=" "
      />
    </div>
  );
}

Setting State

We can set the input value to a state by using a change handler and the useState hook as usual with the InputMask component.

For instance, we can write:

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

export default function App() {
  const [phone, setPhone] = React.useState("");
  return (
    <div className="App">
      <InputMask
        value={phone}
        onChange={e => setPhone(e.target.value)}
        mask="+1(999) 999-9999"
        maskChar=" "
      />
      <p>{phone}</p>
    </div>
  );
}

We added onChange={e => setPhone(e.target.value)} to call setPhone when the input value changes.

It also takes a value prop so that we can set the input value to the phone number that we can change.

Now when we type something into the input, we’ll see the inputted value displayed below it.

Conclusion

We can add input with format being enforced by an input mask by using the react-input-mask package.

Using the component in the package, we can set the mask to enforce the format and handle input value changes like a regular input element.

The mask format can also be adjusted to our liking.

Web developer specializing in React, Vue, and front end development.

View Archive

Masking on the form controls like input, allows a user to enter predefined patterns. Adding a mask-like Number, Alphanumeric, Date etc prevents misinformation submission informs and also helps users to make data entry more friendly.

We can add validation to show errors after the user enters a wrong value, but this process takes unnecessary time to validate and even network consumption if validation is server-side. Masking helps in validating data in real-time and filling up correct details in specified formats.

In this guide, you will learn how to easily add Pattern making with various examples in a React js application. W will be using a profound library known as iMask JS in our React application. You can easily add some predefined masks on input controls also create custom patterns with ease in few steps.

Let’s get started!

How to Add Pattern Mask on Input Fields in React JS App?

• Step 1 – Create React App
• Step 2 – Install iMask Js Library Package
• Step 3 – Using iMask Input Controls in React App
• Step 4 – Phone, Email, Number, Username, Function, Date, Range Numbers Mask Example
• Step 5 – Bootstrap Styles Input Tags with IMaskInput
• Step 6 – See in Action

Step 1 – Create React App

if you already have an app, skip this step. Else execute the below command to download and create a new react application.

npx create-react-app react-mask-app

Move inside the application root

cd react-mask-app

Step 2 – Install iMask Js Library Package

After creating the React app, we will install the React adapter plugin for iMask Js. Execute the following npm command to install the package in our app:

npm install react-imask

Step 3 – Using iMask Input Controls in React App

To use the iMask feature in react js component, you simply need to import the IMaskInput component and use it in the template render function. Open the App.js file with the function component and add the <IMaskInput> component that will create an Input control that allows only Numbers.

import React from "react";
import "./App.css";
import { IMaskInput } from "react-imask";

export default function App() {
  return (
    <div className="container parent-component">
      <h1>Add Form Control Pattern Mask using iMask Plugin @ FreakyJolly</h1>

      <h4>Number Mask</h4>
      <IMaskInput
        mask={Number}
        value="123"
        onAccept={(value, mask) => console.log(value, mask)}
        placeholder="Enter number here"
      />

    </div>
  );
}

It will create a simple native Input control, having a number mask on it. The user will not be able to enter anything else Numbers.

Let’s have a look at various types of Mask implementation based on built-in Masks, Pattern Regex based Masks, Functions Masks and String masks as well.

We will also discuss how to use hooks provided by iMask to implement Mask on any existing Input control without any major modifications.

Step 4 – Phone, Email, Number, Username, Function, Date, Range Numbers Mask Example

We have updated the App.js function component to display various types on input controls with various Masks to restrict unintended values in the form controls.

We covered the following in our example implementation:

• Number Mask
• Phone Mask using String
• Number (Range From-To) Mask
• Date Mask
• Email Address Mask using Regex
• Email or Phone Mask using Min Max props
• Custom(No Space, Only AlphaNumeric) Mask using functions

Open the App.js file and update as shown below:

import React from "react";
import "./App.css";
import { IMaskInput } from "react-imask";

const PhoneMask = "+{00}(0000)00-0000";
const EmailMask = /^S*@?S*$/;
const phoneEmailMask = [
  {
    mask: PhoneMask,
  },
  {
    mask: EmailMask,
  },
];

const customMask = function (value) {
  var pattern = new RegExp(/^[a-z0-9]+$/i);
  console.log(value, pattern.test(value));
  return pattern.test(value);
};

export default function App() {
  return (
    <div className="container parent-component">
      <h1>Add Form Control Pattern Mask using iMask Plugin @ FreakyJolly</h1>

      <h4>Number Mask</h4>
      <IMaskInput
        mask={Number}
        value="123"
        onAccept={(value, mask) => console.log(value, mask)}
        placeholder="Enter number here"
      />

      <h4>Phone Mask</h4>
      <IMaskInput
        mask={PhoneMask}
        value=""
        onAccept={(value, mask) => console.log(value, mask)}
        placeholder="Phone eg +71(9696)86-8602"
      />

      <h4>Number (Range From-To) Mask</h4>
      <IMaskInput
        mask={Number}
        min={100}
        max={2000}
        value=""
        onAccept={(value, mask) => console.log(value, mask)}
        placeholder="Number 100 - 2000"
      />

      <h4>Date Mask</h4>
      <IMaskInput
        mask={Date}
        min={new Date(2019, 0, 1)}
        max={new Date(2022, 0, 1)}
        onAccept={(value, mask) => console.log(value, mask)}
        placeholder="Date"
      />

      <h4>Email Address Mask</h4>
      <IMaskInput
        mask={EmailMask}
        onAccept={(value, mask) => console.log(value, mask)}
        placeholder="Email Address"
      />

      <h4>Email or Phone Mask</h4>
      <IMaskInput
        mask={phoneEmailMask}
        onAccept={(value, mask) => console.log(value, mask)}
        placeholder="Enter Contact"
      />

      <h4>Custom(No Space, Only AlphaNumeric) Mask</h4>
      <IMaskInput mask={customMask} placeholder="Username eg Jolly1239" />
    </div>
  );
}

You can see the working demo on StackBlitz on the tutorial’s end.

Step 5 – Bootstrap Styles Input Tags with IMaskInput

To add bootstrap style, you need to install the bootstrap package in the React JS app:

npm install bootstrap

After that, import the bootstrap.min.css file into App.js file. Then you just need to add classes and put labels as shown below:

import React from "react";
import "./App.css";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import { IMaskInput, IMaskMixin } from "react-imask";

const PhoneMask = "+{00}(0000)00-0000";
const EmailMask = /^S*@?S*$/;
const phoneEmailMask = [
  {
    mask: PhoneMask,
  },
  {
    mask: EmailMask,
  },
];

const customMask = function (value) {
  var pattern = new RegExp(/^[a-z0-9]+$/i);
  console.log(value, pattern.test(value));
  return pattern.test(value);
};

export default function App() {
  return (
    <div className="container parent-component">
      <form>
        <h1>Bootstrap Styles IMask Controls @ FreakyJolly</h1>

        <div className="form-group mt-3">
          <label>Number Mask</label>
          <IMaskInput
            className="form-control"
            mask={Number}
            value="123"
            onAccept={(value, mask) => console.log(value, mask)}
            placeholder="Enter number here"
          />
        </div>
        <div className="form-group mt-3">
          <label>Phone Mask</label>
          <IMaskInput
            className="form-control"
            mask={PhoneMask}
            value=""
            onAccept={(value, mask) => console.log(value, mask)}
            placeholder="Phone eg +71(9696)86-8602"
          />
        </div>

        <div className="form-group mt-3">
          <label>Number (Range From-To) Mask</label>
          <IMaskInput
            className="form-control"
            mask={Number}
            min={100}
            max={2000}
            value=""
            onAccept={(value, mask) => console.log(value, mask)}
            placeholder="Number 100 - 2000"
          />
        </div>

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

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

        <div className="form-group mt-3">
          <label>Email or Phone Mask</label>
          <IMaskInput
            className="form-control"
            mask={phoneEmailMask}
            onAccept={(value, mask) => console.log(value, mask)}
            placeholder="Enter Contact"
          />
        </div>

        <div className="form-group mt-3">
          <label>Custom(No Space, Only AlphaNumeric) Mask</label>
          <IMaskInput
            className="form-control"
            mask={customMask}
            placeholder="Username eg Jolly1239"
          />
        </div>
      </form>
    </div>
  );
}

Here we added the className prop with bootstrap classes. instead on Bootstrap, you can customise Input controls as per your needs in a similar manner.

Step 6 – See in Action

Finally, you can run the application by hitting npm start to start the application at the following URL:

http://localhost:3000

Check working demo @ StackBlitz here:

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:

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.