antd-mask-input

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
        '[phone]'
      }
    />
  </>
));

stories.add('AMEX', () => (
  <>
    <MaskedInput mask={'0000 000000 00000'} />
  </>
));

const DynamicPhone = (props: any) => {
  const cellphoneMask = '(00) 0 0000-0000';
  const phoneMask = '[phone]';

  // 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.

MIT Licensed