
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
react-text-mask
Advanced tools
The react-text-mask package is a versatile library for creating input masks in React applications. It allows developers to define patterns for user input, ensuring that the data entered conforms to specific formats such as phone numbers, dates, and credit card numbers.
Basic Input Masking
This feature allows you to create a masked input for phone numbers. The mask pattern ensures that the input follows the format (123) 456-7890.
```jsx
import React from 'react';
import MaskedInput from 'react-text-mask';
const PhoneInput = () => (
<MaskedInput
mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
placeholder="Enter a phone number"
/>
);
export default PhoneInput;
```
Dynamic Masking
This feature demonstrates how to dynamically change the mask based on the input value. The mask changes from a 4-digit to an 8-digit format as the user types.
```jsx
import React, { useState } from 'react';
import MaskedInput from 'react-text-mask';
const DynamicMaskInput = () => {
const [mask, setMask] = useState([/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]);
const handleChange = (e) => {
const value = e.target.value;
if (value.length > 4) {
setMask([/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]);
} else {
setMask([/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]);
}
};
return (
<MaskedInput
mask={mask}
placeholder="Enter a value"
onChange={handleChange}
/>
);
};
export default DynamicMaskInput;
```
Custom Mask Component
This feature allows you to create a custom mask for currency input. The mask pattern ensures that the input follows the format $123,456.78.
```jsx
import React from 'react';
import MaskedInput from 'react-text-mask';
const CustomMaskInput = () => (
<MaskedInput
mask={['$', /\d/, /\d/, /\d/, ',', /\d/, /\d/, /\d/, '.', /\d/, /\d/]}
placeholder="Enter an amount"
/>
);
export default CustomMaskInput;
```
react-input-mask is another popular library for creating input masks in React applications. It offers similar functionality to react-text-mask but is often praised for its simplicity and ease of use. It supports both controlled and uncontrolled components and provides a straightforward API for defining masks.
Cleave.js is a JavaScript library for formatting input fields. It can be used with React to create input masks for various formats such as credit card numbers, phone numbers, and dates. Cleave.js is known for its flexibility and extensive customization options, making it a strong alternative to react-text-mask.
react-maskedinput is a lightweight library for creating masked input fields in React. It provides a simple API for defining masks and supports a wide range of input formats. While it may not have as many features as react-text-mask, it is a good choice for developers looking for a minimalistic solution.
First, install it.
npm i react-text-mask --save
Then, require it and use it.
import React from 'react'
import MaskedInput from 'react-text-mask'
export default () => (
<div>
<MaskedInput
mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
/>
</div>
)
<MaskedInput/>
is fully compatible with <input/>
element. So, you can
pass it CSS classes, a placeholder attribute, or even an onBlur
handler.
For example, the following works:
<MaskedInput
mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
className="form-control"
placeholder="Enter a phone number"
guide={false}
id="my-input-id"
onBlur={() => {}}
onChange={() => {}}
/>
For more information about the props
that you can pass to the component, see
the documentation here.
To see an example of the code running, follow these steps:
git clone git@github.com:text-mask/text-mask.git
cd text-mask
npm install
npm run react:dev
The code of the example is in react/example
.
<input>
ComponentFor advanced uses, you can customize the rendering of the resultant <input>
via a render prop.
This is entirely optional, if no render
prop is passed, a normal <input>
is rendered.
For example, to use with styled-components, which requires an innerRef:
<MaskedInput
mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
placeholder="Enter a phone number"
id="my-input-id"
render={(ref, props) => (
<MyStyledInput innerRef={ref} {...props} />
)}
/>
const MyStyledInput = styled.input`
background: papayawhip;
`;
We would love some contributions! Check out this document to get started.
FAQs
React input component that accepts mask pattern
The npm package react-text-mask receives a total of 0 weekly downloads. As such, react-text-mask popularity was classified as not popular.
We found that react-text-mask demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers 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
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.