How to use react-input-mask with Input?

[perevezencev]

<Input
  {...input}
  valid={!meta.touched ? null : meta.valid}
  type="tel"
  placeholder={placeholder}
  tag={InputMask}
/>

This sample doesn't work. How to apply mask to Input component?

[supergibbs]

Can you make an example on stackblitz? You can use https://stackblitz.com/edit/reactstrap-v5a4-starter as a base

[perevezencev]

Example on codesandbox https://codesandbox.io/s/pxyo9y36q

[TheSharpieOne]

With all of the tag manipulation going on within Input, it doesn't seem to honor the tag passed in.

[TheSharpieOne]

Give it a try with the latest release (reactstrap@5.0.0-beta)
https://stackblitz.com/edit/reactstrap-v5beta-input-mask?file=Example.js

[gabriellemos]

It is possible to use with react-input-mask and react-hook-form?

https://stackblitz.com/edit/reactstrap-v5beta-input-mask-yu6zii?file=Example.js

[TheSharpieOne]

Using the latest version of those libs, it is possible to use them together.
react-hook-form requires a ref on the input, and react-input-mask allows you to get a ref using inputRef. Supplying the ref provided by react-hook-form to inputRef does the trick.
https://stackblitz.com/edit/reactstrap-v5beta-input-mask-ch8dsm?file=Example.js

import React from "react";
import { Input } from "reactstrap";
import useForm from "react-hook-form";
import InputMask from "react-input-mask";

const Example = () => {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => console.log(data);

  console.log(errors);

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>react-hook-form</label>
        <Input
          type="text"
          name="input-1"
          invalid={errors["input-1"]}
          innerRef={register({ required: true })}
        />
        <br />
        <label>react-input-mask</label>
        <Input
          type="tel"
          mask="+4\9 99 999 99"
          maskChar=" "
          name="masked"
          invalid={errors["masked"]}
          inputRef={register({ required: true })}
          tag={InputMask}
        />
        <br />
        <input type="submit" />
      </form>
    </div>
  );
};

export default Example;