antd-mask-input
An Ant Design Input component for <input>
masking, built on top of imask.
The version 2.0.0 Requires antd >= 4.19.0 - for previous versions use the version
0.1.15
Install
npm
npm install antd-mask-input --save
Usage
stories.add('Phone', () => (
<>
<MaskedInput
mask={
// https://imask.js.org/guide.html#masked-pattern
'+55(00)0000-0000'
}
/>
</>
));
stories.add('AMEX', () => (
<>
<MaskedInput mask={'0000 000000 00000'} />
</>
));
const DynamicPhone = (props: any) => {
const cellphoneMask = '(00) 0 0000-0000';
const phoneMask = '(00) 0000-0000';
// always memoize dynamic masks
const mask = React.useMemo(
() => [
{
mask: cellphoneMask,
lazy: false,
},
{
mask: phoneMask,
lazy: false,
},
],
[]
);
return (
<MaskedInput
{...props}
mask={mask}
maskOptions={{
dispatch: function (appended, dynamicMasked) {
const isCellPhone = dynamicMasked.unmaskedValue[2] === '9';
return dynamicMasked.compiledMasks[isCellPhone ? 0 : 1];
},
}}
/>
);
};
stories.add('Dynamic Mask', () => <DynamicPhone />);
stories.add('RGB', () => {
const mask = React.useMemo<MaskType>(() => {
return [
{
mask: 'RGB,RGB,RGB',
blocks: {
RGB: {
mask: IMask.MaskedRange,
from: 0,
to: 255,
},
},
},
{
mask: /^#[0-9a-f]{0,6}$/i,
},
];
}, []);
return (
<>
<MaskedInput mask={mask} />
</>
);
});
// https://imask.js.org/guide.html#masked-pattern
const DUMB_IP_MASK = '0[0][0].0[0][0].0[0][0].0[0][0]';
stories.add('IP', () => (
<MaskedInput
mask={DUMB_IP_MASK}
value="192.16.1.5" //
/>
));
window.formRef = {};
stories.add('Form', () => (
<Form ref={(val) => (window.formRef = val)}>
<Form.Item
label="Username"
name="username"
initialValue={'123'}
rules={[{ required: true, message: 'Please input your username!' }]}
>
<DynamicPhone />
</Form.Item>
<button>Go</button>
</Form>
));
Props
mask
type MaskType = string | RegExp | Date | Number; // See the https://imask.js.org/guide.html
onChange
onChange: (
event: SyntheticEvent & { maskedValue: string; unmaskedValue: string }
) => any;
maskOptions
:
see the type InputMaskOptions
Other antd props
See Ant Design Input
Other mask options
See Imask options.
Note that this package is not intended to be fully compatible with imask, but the options are almost the same.