# React Input Mask ## Getting started First, install it. ```bash npm i react-text-mask --save ``` Then, require it and use it. ```js import React from 'react' import MaskedInput from 'react-text-mask' export default () => (

) ``` `` is fully compatible with `` element. So, you can pass it CSS classes, a placeholder attribute, or even an `onBlur` handler. For example, the following works: ```js {}} onChange={() => {}} /> ``` ## Documentation For more information about the `props` that you can pass to the component, see the [documentation here](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme). ## Example To see an example of the code running, follow these steps: 1. Clone the repo, `git clone git@github.com:text-mask/text-mask.git` 1. `cd text-mask` 1. `npm install` 1. `npm run react:dev` 1. Open [http://localhost:3000](http://localhost:3000) The code of the example is in [`react/example`](https://github.com/text-mask/text-mask/tree/master/react/example). ## Customize Rendered `` Component For advanced uses, you can customize the rendering of the resultant `` via a render prop. This is entirely optional, if no `render` prop is passed, a normal `` is rendered. For example, to use with styled-components, [which requires an innerRef](https://www.styled-components.com/docs/advanced#refs): ```js ( )} /> const MyStyledInput = styled.input` background: papayawhip; `; ``` ## Contributing We would love some contributions! Check out [this document](https://github.com/text-mask/text-mask/blob/master/howToContribute.md#readme) to get started.

	Stars	Issues	Version	Updated	Created
react-credit-cards	2,577	27	0.8.3	4 years ago	8 years ago
react-input-mask	2,221	139	2.0.4	6 years ago	9 years ago
react-text-mask	8,262	333	5.5.0	2 years ago	8 years ago

react-credit-cards vs react-input-mask vs react-text-mask

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past