README
MaskInput React Component
Install
npm install --save @idui/react-mask-input
yarn add @idui/react-mask-input
Advantages
- Fully customizable, smart
- Adjusts entered/inserted value to the mask
- Able to define mask by custom tokens
- Accepts custom validation applied before setting value
- Jumps over tokens on RightArrow/LeftArrow keyDown and during input/erasing
- Able to show maskPlaceholder and value in different colors
Docs
See props inBasic Example
import React from 'react'
import MaskInput from '@idui/react-mask-input'
function Example() {
const [value, setValue] = useState('');
return <MaskInput
value={value}
onChange={setValue}
mask="9999 9999 9999 9999"
maskPlaceholder="0000 0000 0000 0000"
fitWidthToMask={false} // whether resize input to mask width or not, default false
placeholder="Enter Card Number"
/>;
}
With custom validation (date)
import React from 'react'
import MaskInput from '@idui/react-mask-input'
const dateRegex = /^(0[1-9]|[1-2]\d|3[0-1])\/(0[1-9]|1[0-2])\/[1-9]\d{3}$/;
const validDate = '01/01/2020';
const validateMaskedValue = (currentMaskedValue) =>
dateRegex.test(
currentMaskedValue + validDate.substring(currentMaskedValue.length)
);
function DateValidation() {
const [value, setValue] = useState('');
return <MaskInput
value={value}
onChange={setValue}
mask="99/99/9999"
maskPlaceholder="DD/MM/YYYY"
validateMaskedValue={validateMaskedValue}
/>;
}
Custom tokens
import React from 'react'
import MaskInput from '@idui/react-mask-input'
function Example() {
const [value, setValue] = useState('');
return <MaskInput
value={value}
onChange={setValue}
tokens={{
0: '