*** ABANDONED - Use react-imask ***

[zlanich]

Hey all! There are a ton of comments on this library, and I've had a lot of issues with it. One of the issues recommends using https://github.com/uNmAnNeR/imaskjs/tree/master/packages/react-imask, and I would also recommend this. react-imask works very well for us.

It's a bit of work to figure out how to use all of it, but one thing I had to dig for was parsing the value before the masking occurs (ie. Parsing a pasted value and modifying it). Use the prepare prop for that.

[johanguse]

Guys, you can use this fork... https://github.com/mona-health/react-input-mask/

[1TheMuffinMan]

@johanguse I was lucky to stumble across this issue/comment. I wish you could get access to the original on NPM.com and put a comment directing people to your fork.

[joshshowalter]

@johanguse is there typescript support for that?

[1TheMuffinMan]

@joshshowalter yes, it's a fork of the old library but now it works properly

[ozkary]

@johanguse Do you know if this works with children components as in :

 <InputMask
      mask={mask}
      disabled={disabled}
      maskPlaceholder={null}
      type={type}        
      {...rest}
    >
      {(inputProps: any) => <Input {...inputProps}    
    </InputMask>

It works without having the children function. It fails on the validateChildren function as the props are not passed to the inputElement, so it is a undefined property.

function validateChildren(props, inputElement) {
  var conflictProps = CONTROLLED_PROPS.filter(function (propId) {
    return inputElement.props[propId] != null && inputElement.props[propId] !== props[propId];
  });
  !!conflictProps.length ? process.env.NODE_ENV !== "production" ? invariant(false, "react-input-mask: the following props should be passed to the InputMask component, not to children: " + conflictProps.join(",")) : invariant(false) : void 0;
}

Thanks

[johanguse]

@johanguse Do you know if this works with children components as in :

 <InputMask
      mask={mask}
      disabled={disabled}
      maskPlaceholder={null}
      type={type}        
      {...rest}
    >
      {(inputProps: any) => <Input {...inputProps}    
    </InputMask>

It works without having the children function. It fails on the validateChildren function as the props are not passed to the inputElement, so it is a undefined property.

function validateChildren(props, inputElement) {
  var conflictProps = CONTROLLED_PROPS.filter(function (propId) {
    return inputElement.props[propId] != null && inputElement.props[propId] !== props[propId];
  });
  !!conflictProps.length ? process.env.NODE_ENV !== "production" ? invariant(false, "react-input-mask: the following props should be passed to the InputMask component, not to children: " + conflictProps.join(",")) : invariant(false) : void 0;
}

Thanks

The last time I used the library was a long time ago—I can’t recall. Sorry!

[Aluisio]

Hello everyone.
I'm trying to migrate to the @mona-health/react-input-mask fork, but I'm not able to use it with typescript, and the InputMask export is as any. Has anyone else had this difficulty?
@johanguse

[Aluisio]

@joshshowalter yes, it's a fork of the old library but now it works properly

@1TheMuffinMan Are you able to use it with TypeScript? For me, no properties are showing up, and the export is as any