Vulnerabilities | |||||
---|---|---|---|---|---|
Version | Suggest | Low | Medium | High | Critical |
2.0.4 | 0 | 0 | 0 | 0 | 0 |
2.0.3 | 0 | 0 | 0 | 0 | 0 |
2.0.2 | 0 | 0 | 0 | 0 | 0 |
2.0.1 | 0 | 0 | 0 | 0 | 0 |
2.0.0 | 0 | 0 | 0 | 0 | 0 |
1.2.2 | 0 | 0 | 0 | 0 | 0 |
1.2.1 | 0 | 0 | 0 | 0 | 0 |
1.2.0 | 0 | 0 | 0 | 0 | 0 |
1.1.2 | 0 | 0 | 0 | 0 | 0 |
1.1.1 | 0 | 0 | 0 | 0 | 0 |
1.1.0 | 0 | 0 | 0 | 0 | 0 |
1.0.7 | 0 | 0 | 0 | 0 | 0 |
1.0.6 | 0 | 0 | 0 | 0 | 0 |
1.0.5 | 0 | 0 | 0 | 0 | 0 |
1.0.4 | 0 | 0 | 0 | 0 | 0 |
1.0.3 | 0 | 0 | 0 | 0 | 0 |
1.0.2 | 0 | 0 | 0 | 0 | 0 |
1.0.1 | 0 | 0 | 0 | 0 | 0 |
1.0.0 | 0 | 0 | 0 | 0 | 0 |
0.9.1 | 0 | 0 | 0 | 0 | 0 |
0.9.0 | 0 | 0 | 0 | 0 | 0 |
0.8.2 | 0 | 0 | 0 | 0 | 0 |
0.8.1 | 0 | 0 | 0 | 0 | 0 |
0.8.0 | 0 | 0 | 0 | 0 | 0 |
0.7.9 | 0 | 0 | 0 | 0 | 0 |
0.7.8 | 0 | 0 | 0 | 0 | 0 |
0.7.7 | 0 | 0 | 0 | 0 | 0 |
0.7.6 | 0 | 0 | 0 | 0 | 0 |
0.7.5 | 0 | 0 | 0 | 0 | 0 |
0.7.4 | 0 | 0 | 0 | 0 | 0 |
0.7.3 | 0 | 0 | 0 | 0 | 0 |
0.7.2 | 0 | 0 | 0 | 0 | 0 |
0.7.1 | 0 | 0 | 0 | 0 | 0 |
0.7.0 | 0 | 0 | 0 | 0 | 0 |
0.6.8 | 0 | 0 | 0 | 0 | 0 |
0.6.7 | 0 | 0 | 0 | 0 | 0 |
0.6.6 | 0 | 0 | 0 | 0 | 0 |
0.6.5 | 0 | 0 | 0 | 0 | 0 |
0.6.4 | 0 | 0 | 0 | 0 | 0 |
0.6.3 | 0 | 0 | 0 | 0 | 0 |
0.6.2 | 0 | 0 | 0 | 0 | 0 |
0.6.1 | 0 | 0 | 0 | 0 | 0 |
0.5.10 | 0 | 0 | 0 | 0 | 0 |
0.5.9 | 0 | 0 | 0 | 0 | 0 |
0.5.8 | 0 | 0 | 0 | 0 | 0 |
0.5.7 | 0 | 0 | 0 | 0 | 0 |
0.5.6 | 0 | 0 | 0 | 0 | 0 |
0.5.5 | 0 | 0 | 0 | 0 | 0 |
0.5.4 | 0 | 0 | 0 | 0 | 0 |
0.5.3 | 0 | 0 | 0 | 0 | 0 |
0.5.2 | 0 | 0 | 0 | 0 | 0 |
0.5.1 | 0 | 0 | 0 | 0 | 0 |
0.5.0 | 0 | 0 | 0 | 0 | 0 |
0.4.1 | 0 | 0 | 0 | 0 | 0 |
0.4.0 | 0 | 0 | 0 | 0 | 0 |
0.3.3 | 0 | 0 | 0 | 0 | 0 |
0.3.1 | 0 | 0 | 0 | 0 | 0 |
0.3.0 | 0 | 0 | 0 | 0 | 0 |
0.2.1 | 0 | 0 | 0 | 0 | 0 |
0.2.0 | 0 | 0 | 0 | 0 | 0 |
0.1.4 | 0 | 0 | 0 | 0 | 0 |
0.1.3 | 0 | 0 | 0 | 0 | 0 |
0.1.2 | 0 | 0 | 0 | 0 | 0 |
0.1.1 | 0 | 0 | 0 | 0 | 0 |
0.1.0 | 0 | 0 | 0 | 0 | 0 |
0.0.17 | 0 | 0 | 0 | 0 | 0 |
0.0.16 | 0 | 0 | 0 | 0 | 0 |
0.0.15 | 0 | 0 | 0 | 0 | 0 |
0.0.14 | 0 | 0 | 0 | 0 | 0 |
0.0.13 | 0 | 0 | 0 | 0 | 0 |
0.0.12 | 0 | 0 | 0 | 0 | 0 |
0.0.11 | 0 | 0 | 0 | 0 | 0 |
0.0.10 | 0 | 0 | 0 | 0 | 0 |
0.0.9 | 0 | 0 | 0 | 0 | 0 |
0.0.8 | 0 | 0 | 0 | 0 | 0 |
0.0.7 | 0 | 0 | 0 | 0 | 0 |
0.0.6 | 0 | 0 | 0 | 0 | 0 |
0.0.5 | 0 | 0 | 0 | 0 | 0 |
0.0.4 | 0 | 0 | 0 | 0 | 0 |
0.0.3 | 0 | 0 | 0 | 0 | 0 |
0.0.2 | 0 | 0 | 0 | 0 | 0 |
0.0.1 | 0 | 0 | 0 | 0 | 0 |
2.0.4 - This version may not be safe as it has not been updated for a long time. Find out if your coding project uses this component and get notified of any reported security vulnerabilities with Meterian-X Open Source Security Platform
Maintain your licence declarations and avoid unwanted licences to protect your IP the way you intended.
MIT - MIT LicenseInput masking component for React. Made with attention to UX.
This is a development branch for version 3.0. For the latest stable version see v2 branch.
npm install react-input-mask@next --save
react-input-mask requires React 16.8.0 or later. If you need support for older versions, use version 2.
import React from "react"
import InputMask from "react-input-mask";
function DateInput(props) {
return <InputMask mask="99/99/9999" onChange={props.onChange} value={props.value} />;
}
Name | Type | Default | Description |
---|---|---|---|
mask |
{String|Array<String, RegExp>} |
Mask format | |
maskPlaceholder |
{String} |
_ |
Placeholder to cover unfilled parts of the mask |
alwaysShowMask |
{Boolean} |
false |
Whether mask prefix and placeholder should be displayed when input is empty and has no focus |
beforeMaskedStateChange |
{Function} |
Function to modify value and selection before applying mask | |
children |
{ReactElement} |
Custom render function for integration with other input components |
Mask format. Can be either a string or array of characters and regular expressions.
<InputMask mask="99/99/99" />
Simple masks can be defined as strings. The following characters will define mask format:
Character | Allowed input |
---|---|
9 | 0-9 |
a | a-z, A-Z |
* | 0-9, a-z, A-Z |
Any format character can be escaped with a backslash.
More complex masks can be defined as an array of regular expressions and constant characters.
// Canadian postal code mask
const firstLetter = /(?!.*[DFIOQU])[A-VXY]/i;
const letter = /(?!.*[DFIOQU])[A-Z]/i;
const digit = /[0-9]/;
const mask = [firstLetter, digit, letter, " ", digit, letter, digit];
return <InputMask mask={mask} />;
// Will be rendered as 12/--/--
<InputMask mask="99/99/99" maskPlaceholder="-" value="12" />
// Will be rendered as 12/mm/yy
<InputMask mask="99/99/99" maskPlaceholder="dd/mm/yy" value="12" />
// Will be rendered as 12/
<InputMask mask="99/99/99" maskPlaceholder={null} value="12" />
Character or string to cover unfilled parts of the mask. Default character is "_". If set to null
or empty string, unfilled parts will be empty as in a regular input.
If enabled, mask prefix and placeholder will be displayed even when input is empty and has no focus.
In case you need to customize masking behavior, you can provide beforeMaskedStateChange
function to change masked value and cursor position before it's applied to the input.
It receieves an object with previousState
, currentState
and nextState
properties. Each state is an object with value
and selection
properites where value
is a string and selection is an object containing start
and end
positions of the selection.
change
event.value
and selection
fields.Selection positions will be null
if input isn't focused and during rendering.
beforeMaskedStateChange
must return a new state with value
and selection
.
// Trim trailing slashes
function beforeMaskedStateChange({ nextState }) {
let { value } = nextState;
if (value.endsWith("/")) {
value = value.slice(0, -1);
}
return {
...nextState,
value
};
}
return <InputMask mask="99/99/99" maskPlaceholder={null} beforeMaskedStateChange={beforeMaskedStateChange} />;
Please note that beforeMaskedStateChange
executes more often than onChange
and must be pure.
To use another component instead of regular <input />
provide it as children. The following properties, if used, should always be defined on the InputMask
component itself: onChange
, onMouseDown
, onFocus
, onBlur
, value
, disabled
, readOnly
.
import React from 'react';
import InputMask from 'react-input-mask';
import MaterialInput from '@material-ui/core/Input';
// Will work fine
function Input(props) {
return (
<InputMask mask="99/99/9999" value={props.value} onChange={props.onChange}>
<MaterialInput type="tel" disableUnderline />
</InputMask>
);
}
// Will throw an error because InputMask's and children's onChange props aren't the same
function InvalidInput(props) {
return (
<InputMask mask="99/99/9999" value={props.value}>
<MaterialInput type="tel" disableUnderline onChange={props.onChange} />
</InputMask>
);
}
Browser's autofill requires either empty value in input or value which exactly matches beginning of the autofilled value. I.e. autofilled value "+1 (555) 123-4567" will work with "+1" or "+1 (5", but won't work with "+1 (___) ___-____" or "1 (555)". There are several possible solutions:
maskChar
to null and trim space after "+1" with beforeMaskedStateChange
if no more digits are entered.Please note that it might lead to worse user experience (should I enter +1 if input is empty?). You should choose what's more important to your users — smooth typing experience or autofill. Phone and ZIP code inputs are very likely to be autofilled and it's a good idea to care about it, while security confirmation code in two-factor authorization shouldn't care about autofill at all.
The following sequence could fail
cy.get("input")
.focus()
.type("12345")
.should("have.value", "12/34/5___"); // expected <input> to have value 12/34/5___, but the value was 23/45/____
Since focus is not an action command, it behaves differently than the real user interaction and, therefore, less reliable.
There is a few possible workarounds
// Start typing without calling focus() explicitly.
// type() is an action command and focuses input anyway
cy.get("input")
.type("12345")
.should("have.value", "12/34/5___");
// Use click() instead of focus()
cy.get("input")
.click()
.type("12345")
.should("have.value", "12/34/5___");
// Or wait a little after focus()
cy.get("input")
.focus()
.wait(50)
.type("12345")
.should("have.value", "12/34/5___");
Thanks to BrowserStack for the help with testing on real devices