antd-mask-input

An Ant Design Input component for 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

$3

``
npm install antd-mask-input --save
`

Usage

`ts
stories.add('Phone', () => (
<>
mask={
// https://imask.js.org/guide.html#masked-pattern
'+55(00)0000-0000'
}
/>

));

stories.add('AMEX', () => (
<>


));

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 (
{...props}
mask={mask}
maskOptions={{
dispatch: function (appended, dynamicMasked) {
const isCellPhone = dynamicMasked.unmaskedValue[2] === '9';
return dynamicMasked.compiledMasks[isCellPhone ? 0 : 1];
},
}}
/>
);
};

stories.add('Dynamic Mask', () => );

stories.add('RGB', () => {
const mask = React.useMemo(() => {
return [
{
mask: 'RGB,RGB,RGB',
blocks: {
RGB: {
mask: IMask.MaskedRange,
from: 0,
to: 255,
},
},
},
{
mask: /^#[0-9a-f]{0,6}$/i,
},
];
}, []);

return (
<>


);
});

// 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', () => (
mask={DUMB_IP_MASK}
value="192.16.1.5" //
/>
));

window.formRef = {};

stories.add('Form', () => (


(window.formRef = val)}>
label="Username"
name="username"
initialValue={'123'}
rules={[{ required: true, message: 'Please input your username!' }]}
>

Go

));

`

Props

$3

`ts
type MaskType = string | RegExp | Date | Number; // See the https://imask.js.org/guide.html
`

$3

`ts
onChange: (
event: SyntheticEvent & { maskedValue: string; unmaskedValue: string }
) => any;
`

$3

see the type InputMaskOptions`

$3

See Ant Design Input

$3

See Imask options.

Note that this package is not intended to be fully compatible with imask, but the options are almost the same.

MIT Licensed