CxJS Mask Input Field

Text Field component that allows you to add a custom mask on it. You need to bind the value to the store!

Install

Mask Input Field can be installed with both Yarn and NPM:

yarn add cx-mask-input-field

npm install cx-mask-input-field

You need to change the following loader in webpack.config.js:

...
    {
        test: /\.js$/,
        include: [p('common'), p('app'), /packages[\\\/]cx/, /node_modules[\\\/](cx|cx-react|cx-theme-\w*|cx-google-maps)[\\\/]/,
        use: { loader:  'babel-loader', options:  babelCfg },

    }
...

Into:

...
    {
        test: /\.js$/,
        include: [p('common'), p('app'), /packages[\\\/]cx/, /node_modules[\\\/](cx|cx-.+)[\\\/]/,],
        use: { loader: 'babel-loader', options: babelCfg },
    }
...

Properties

mask : string

Mask string. Default format characters are:

9: 0-9
a: A-Z, a-z
*: A-Z, a-z, 0-9

Any character can be escaped with a backslash. It will appear as a double backslash in JS strings. For example, a German phone mask with unremoveable prefix +49 will look like

import { MaskInputField } from  'cx-mask-input-field';

<MaskInputField  value-bind="data1"  mask="+4\\9 99 999 99"  />;
<MaskInputField  value-bind="data2"  mask={'+4\\\\9 99 999 99'} />;

maskPlaceholder : string

Character to cover unfilled parts of the mask. Default character is "_". If set to null or empty string, unfilled parts will be empty as in ordinary input.

Packages and Libraries

react-input-mask

Component is based on react-input-mask component, which is wrapped in CxJS Widget. This makes it functional out-of-the-box, once you have bind value in the store.

Example

import { MaskInputField } from  'cx-mask-input-field';

<MaskInputField  value-bind="data"  mask="99.99.99.99"  maskPlaceholder="_"  />;

License

This component is available under the terms of the MIT license.