React Input Mask
Getting started
First, install it.
npm i react-text-mask --save
Then, require it and use it.
<div> <MaskedInput mask='(' /[1-9]/ /\d/ /\d/ ')' ' ' /\d/ /\d/ /\d/ '-' /\d/ /\d/ /\d/ /\d/ /> </div>
<MaskedInput/>
is fully compatible with <input/>
element. So, you can
pass it CSS classes, a placeholder attribute, or even an onBlur
handler.
For example, the following works:
<MaskedInput 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:
- Clone the repo,
git clone git@github.com:text-mask/text-mask.git
cd text-mask
npm install
npm run react:dev
- Open http://localhost:3000
The code of the example is in react/example
.
<input>
Component
Customize Rendered For advanced uses, you can customize the rendering of the resultant <input>
via a render prop.
This is entirely optional, if no render
prop is passed, a normal <input>
is rendered.
For example, to use with styled-components, which requires an innerRef:
<MaskedInput mask='(' /[1-9]/ /\d/ /\d/ ')' ' ' /\d/ /\d/ /\d/ '-' /\d/ /\d/ /\d/ /\d/ placeholder="Enter a phone number" id="my-input-id" render= <MyStyledInput innerRef=ref ...props /> /> const MyStyledInput = styledinput` background: papayawhip;`;
Contributing
We would love some contributions! Check out this document to get started.