Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
react-input-mask
Advanced tools
The react-input-mask package is a versatile input masking library for React applications. It allows developers to create input fields with predefined formats, ensuring that users enter data in a consistent and expected manner. This is particularly useful for fields like phone numbers, dates, and credit card numbers.
Basic Input Masking
This feature allows you to create a basic input mask for phone numbers. The mask prop defines the format, and the input field will automatically enforce this format as the user types.
import React from 'react';
import InputMask from 'react-input-mask';
function PhoneInput() {
return (
<InputMask mask="(999) 999-9999" placeholder="Enter phone number" />
);
}
export default PhoneInput;
Custom Masking Characters
This feature allows you to define custom masking characters. In this example, the mask includes both numbers and letters, and the maskChar prop specifies the character to use for unfilled positions.
import React from 'react';
import InputMask from 'react-input-mask';
function CustomMaskInput() {
return (
<InputMask mask="99-aaa-9999" maskChar="_" placeholder="Enter custom format" />
);
}
export default CustomMaskInput;
Masking with Validation
This feature demonstrates how to use input masking with state management and validation. The input field is masked for a credit card number, and the value is managed using React's useState hook.
import React, { useState } from 'react';
import InputMask from 'react-input-mask';
function ValidatedInput() {
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<InputMask mask="9999-9999-9999-9999" value={value} onChange={handleChange} placeholder="Enter credit card number" />
);
}
export default ValidatedInput;
react-text-mask is another popular library for input masking in React. It offers similar functionality to react-input-mask but also supports masking for other frameworks like Angular and Vue. It provides a flexible API and supports custom mask definitions.
cleave.js is a JavaScript library for formatting input fields. It supports a wide range of input types, including credit cards, phone numbers, and dates. Unlike react-input-mask, cleave.js is not limited to React and can be used with vanilla JavaScript or other frameworks.
imaskjs is a versatile input masking library that supports a wide range of input types and custom masks. It offers a rich set of features, including dynamic masks and pattern matching. imaskjs can be used with React, Angular, Vue, and vanilla JavaScript.
Yet another React component for input masking with attention to small usability details with cursor position, copy-paste, etc.
http://sanniassin.github.io/react-input-mask/demo.html
mask
: string
Mask string. Format characters are:
9
: 0-9
a
: A-Z, a-z
*
: A-Z, a-z, 0-9
Any character can be escaped with backslash, which usually will appear as double backslash in JS strings. For example, German phone mask with unremoveable prefix +49 will look like "+4\\9 99 999 99"
maskChar
: string
Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input.
var PhoneInput = React.createClass({
render: function() {
return <InputElement {...this.props} mask="+4\\9 99 999 99" maskChar=" "/>;
}
});
FAQs
Masked input component for React
The npm package react-input-mask receives a total of 351,791 weekly downloads. As such, react-input-mask popularity was classified as popular.
We found that react-input-mask demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.