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
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={() => {}}
/>
`

Documentation

For more information about the props that you can pass to the component, see
the documentation here.

Example

To see an example of the code running, follow these steps:

1. Clone the repo, git clone git@github.com:im-open/text-mask.git
1. cd text-mask
1. npm install
1. npm run react:dev
1. Open http://localhost:3000

The code of the example is in 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:

`js
mask={[
"(",
/[1-9]/,
/\d/,
/\d/,
")",
" ",
/\d/,
/\d/,
/\d/,
"-",
/\d/,
/\d/,
/\d/,
/\d/,
]}
placeholder="Enter a phone number"
id="my-input-id"
render={(ref, props) => }
/>;

const MyStyledInput = styled.input
background: papayawhip;
;
``

Contributing

We would love some contributions! Check out this document to get started.