# antd-mask-input

> Ant Design Mask Input

Latest version **2.0.7** (published 2022-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install antd-mask-input
pnpm add antd-mask-input
yarn add antd-mask-input
bun add antd-mask-input
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.7 |
| Published | 2022-03-31 |
| First published | 2019-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 27 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 88 |
| Author | @antoniopresto |
| Maintainers | nobody.codes, antonio.presto |
| Keywords | react, antd, ant design, mask input, mask, masked |

## Links

- npm: https://www.npmjs.com/package/antd-mask-input
- Repository: https://github.com/antoniopresto/antd-mask-input
- Homepage: https://github.com/antoniopresto/antd-mask-input#readme
- Issues: https://github.com/antoniopresto/antd-mask-input/issues
- npm.io page: https://npm.io/package/antd-mask-input

## Dependencies (1)

- [imask](https://npm.io/package/imask.md) 6.4.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.7 (latest) — 2022-03-31
- 2.0.5-rc3 (alpha) — 2022-03-26
- 2.0.6 — 2022-03-30
- 2.0.5 — 2022-03-26
- 2.0.5-rc2 — 2022-03-26
- 2.0.5-rc1 — 2022-03-26
- 2.0.4 — 2022-03-26
- 2.0.3 — 2022-03-26
- 2.0.0 — 2022-03-25
- 0.1.15 — 2021-03-29
- 0.1.14 — 2020-10-16
- 0.1.13 — 2020-01-31
- 0.1.12 — 2019-09-20
- 0.1.11 — 2019-09-16
- 0.1.10 — 2019-07-06
- … 9 more at https://npm.io/package/antd-mask-input/versions

## README

# antd-mask-input

An [Ant Design Input](https://ant.design/components/input/) component for `<input>` masking, built on top of [imask](https://imask.js.org/guide.html).

> 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

```ts
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`

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

### `onChange`

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

### `maskOptions`:

see the type `InputMaskOptions`

### Other antd props

See [Ant Design Input](https://ant.design/components/input/)

### Other mask options

See [Imask options](https://imask.js.org/guide.html).

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

## MIT Licensed

---
_Source: https://npm.io/package/antd-mask-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._