# `MaskedInput` A [React](http://facebook.github.io/react/) component for `` masking, built on top of [inputmask-core](https://github.com/insin/inputmask-core). ![This project has never been used by its author, other than while making it.](https://img.shields.io/badge/author--usage-never-red.png "This project has never been used by its author, other than while making it") ## [Live Demo](http://insin.github.io/react-maskedinput/) ## Install ### npm ``` npm install react-maskedinput --save ``` ### Browser bundle The browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` variable to work with. * [react-maskedinput.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.js) (development version) * [react-maskedinput.min.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.min.js) (compressed production version) ## Usage Give `MaskedInput` a [`mask`](#mask-string) and an `onChange` callback: ```javascript import React from 'react' import MaskedInput from 'react-maskedinput' class CreditCardDetails extends React.Component { state = { card: '', expiry: '', ccv: '' } _onChange = (e) => { this.setState({[e.target.name]: e.target.value}) } render() { return

Card Number:{' '} Expiry Date:{' '} CCV:{' '}

} } ``` Create some wrapper components if you have a masking configuration which will be reused: ```javascript function CustomInput(props) { return } ``` ## Props ### `mask` : `string` The masking pattern to be applied to the ``. See the [inputmask-core docs](https://github.com/insin/inputmask-core#pattern) for supported formatting characters. ### `onChange` : `(event: SyntheticEvent) => any` A callback which will be called any time the mask's value changes. This will be passed a `SyntheticEvent` with the input accessible via `event.target` as usual. **Note:** this component currently calls `onChange` directly, it does not generate an `onChange` event which will bubble up like a regular `` component, so you *must* pass an `onChange` if you want to get a value back out. ### `formatCharacters`: `Object` Customised format character definitions for use in the pattern. See the [inputmask-core docs](https://github.com/insin/inputmask-core#formatcharacters) for details of the structure of this object. ### `placeholderChar`: `string` Customised placeholder character used to fill in editable parts of the pattern. See the [inputmask-core docs](https://github.com/insin/inputmask-core#placeholderchar--string) for details. ### `value` : `string` A default value for the mask. ### `placeholder` : `string` A default `placeholder` will be generated from the mask's pattern, but you can pass a `placeholder` prop to provide your own. ### `size` : `number | string` By default, the rendered ``'s `size` will be the length of the pattern, but you can pass a `size` prop to override this. ### Other props Any other props passed in will be passed as props to the rendered ``, except for the following, which are managed by the component: * `maxLength` - will always be equal to the pattern's `.length` * `onKeyDown`, `onKeyPress` & `onPaste` - will each trigger a call to `onChange` when necessary ## MIT Licensed

			Stars	Issues	Version	Updated	Created	Size
	react-credit-cards		2,577	27	0.8.3	4 years ago	8 years ago
	react-maskedinput		730	63	4.0.1	7 years ago	9 years ago

react-credit-cards vs react-maskedinput

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past