How to use react-input-mask with Input?

<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?

[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

[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;