react-masked-field
v2.1.0
Published
A masked field component built in React
Downloads
20,541
Readme
React Masked Field
A masked field component built in React.
The MaskedField
component is a text input field that allows you to restrict and format the values that can be entered into it, while informing the user of the expected input. Common uses include dates, phone numbers, social security numbers and tax IDs.
Example
import MaskedField from 'react-masked-field';
ReactDOM.render(
<MaskedField mask="99/99/9999" onComplete={() => console.log('Date is ' + date)} />,
document.getElementById('demo'),
);
Installation
Install from npm:
npm install react-masked-field
Props
mask?: string
The mask applied to the value of the field. For each character of the mask that matches a translation
, the input character will be restricted to the corresponding regular expression. If no mask is provided, it will function like a normal input
element.
translations?: { [char: string]: RegExp }
default:
{
'9': /\d/,
'a': /[A-Za-z]/,
'*': /[A-Za-z0-9]/
}
Additional (or overridden) translations for converting mask characters to regular expressions.
onComplete?: (val: string) => void
The onComplete
event is triggered when the mask has been completely filled. The value
of the field is passed to the event handler.
inputRef?: (node: HTMLInputElement | null) => any
A ref passed to the internal input
element.
placeholder?: string
default: the value of the mask
prop
This functions just like a normal input
placeholder
prop. If no placeholder
is provided, the mask
prop will be used as the placeholder
.
Other props
In addition to the props above, MaskedField
should handle all supported input
props.
License
This project is licensed under the terms of the MIT license