How to use imask - 10 common examples

import React from 'react';
import PropTypes from 'prop-types';
import IMask from 'imask';

const MASK_PROPS = {
  // common
  mask: PropTypes.oneOfType([
    PropTypes.array,
    PropTypes.func,
    PropTypes.string,
    PropTypes.instanceOf(RegExp),
    PropTypes.oneOf([Date, Number, IMask.Masked]),
    PropTypes.instanceOf(IMask.Masked),
  ]),
  value: PropTypes.any,
  unmask: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.oneOf(['typed']),
  ]),
  prepare: PropTypes.func,
  validate: PropTypes.func,
  commit: PropTypes.func,
  overwrite: PropTypes.bool,

  // events
  onAccept: PropTypes.func,
  onComplete: PropTypes.func,

import React from 'react';
import PropTypes from 'prop-types';
import IMask from 'imask';

const MASK_PROPS = {
  // common
  mask: PropTypes.oneOfType([
    PropTypes.array,
    PropTypes.func,
    PropTypes.string,
    PropTypes.instanceOf(RegExp),
    PropTypes.oneOf([Date, Number, IMask.Masked]),
    PropTypes.instanceOf(IMask.Masked),
  ]),
  value: PropTypes.any,
  unmask: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.oneOf(['typed']),
  ]),
  prepare: PropTypes.func,
  validate: PropTypes.func,
  commit: PropTypes.func,
  overwrite: PropTypes.bool,

  // events
  onAccept: PropTypes.func,
  onComplete: PropTypes.func,

  // pattern

import iMask from 'imask';

// This monkey patch fixes the way iMask detects if an input is currently
// active since, in our case, we must look for the shadowRoot.activeElement
// and not the document.activeElement.

Object.defineProperty(iMask.HTMLMaskElement.prototype, 'isActive', {
  get () {
    const rootElement = this.input.getRootNode
      ? this.input.getRootNode() || document
      : document;

    return this.input === rootElement.activeElement;
  }
});

export const maskMaker = config => domEl => iMask(domEl, config);

componentDidMount () {
    const {mask} = this.props
    this.mask = new IMask(this.field, mask)
  }

private initMask () {
    this.maskRef = IMask(this.element, this.imask as Opts)
      .on('accept', this._onAccept.bind(this))
      .on('complete', this._onComplete.bind(this));
  }

componentDidMount() {
    const {mask} = this.props
    this.mask = new IMask(this.field, mask)
  }

function initMask (el, opts) {
  el.maskRef = new IMask(el, opts)
    .on('accept', () => fireEvent(el, 'accept', el.maskRef))
    .on('complete', () => fireEvent(el, 'complete', el.maskRef));
}

initMask (maskOptions=this._extractMaskOptionsFromProps({...this.props})) {
      this.maskRef = new IMask(this.element, maskOptions)
        .on('accept', this._onAccept.bind(this))
        .on('complete', this._onComplete.bind(this));

      this.maskValue = this.props.value;
    }