Top
MaskedInput - Getting started
MaskedInput
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <MaskedInput />, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/MaskedInput and @zippytech/react-toolkit/MaskedInput/index.css.
This is the most basic setup for a <MaskedInput />. In the following sections we will explore how to use the masked input in various scenarios, using and defining masks, using callback props and more.
You can specify a controlled value prop for the input, or use the uncontrolled defaultValue. To be notified of value changes, define onChange(value) - and update the value in response to that, if your're using a controlled input.
Using a mask will force the input to respect the given pattern. Using the mask definitions characters, we can build the pattern that the given masked input will respect. In the following example, the mask will accept phone numbers where user types in 9 digits:
The mask fill can be hidden on blur using the hideMaskFillOnBlur prop. In the following example, the mask will accept phone numbers where user types in 9 digits, and will show the fill only on focus:
You can disable or lock the <MaskedInput /> using the disabled and readOnly props.
Continue reading about customizing the <MaskedInput /> in-depth in the next sections, detailing defining a mask and other props.