VerificationInput uses forwardRef but TS defs don't expose that

[legraphista]

Hi,

Thanks for the awesome component 😄!

Unfortunately, I hit a little snag:

In your code, you expose the ref passthrough 🎉

react-verification-input/src/index.js

Line 9 in acc512a

const VerificationInput = forwardRef(

But the definitions declare just a plain functional component

react-verification-input/src/index.d.ts

Line 23 in acc512a

declare const VerificationInput: React.FC<VerificationInputProps>;

Could you please add the missing ref prop? or maybe make use of PropsWithoutRef<P> & RefAttributes<T> like here?
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9cc04052f7e17abbfb2a8a1636ff9fa456b01552/types/react/index.d.ts#L805

I'm using the ref to listen to paste events so that I can remove dashes from the clipboard text since I want to ignore them.
For now, it's ok since I can // @ts-ignore it

[andreaswilli]

Thanks for the feedback.

I am not too familiar with React typings, but it seems like PropsWithoutRef<P> & RefAttributes<T> would be a good solution. I will take a closer look.

[legraphista]

Thanks for looking at it!

Since the props don't contain ref I think you can just append & RefAttributes<HTMLInputElement> to them

[andreaswilli]

I decided to go with ForwardRefExoticComponent since this is how the forwardRef function is typed.

The change is released as version 2.0.1. Let me know if it works for you.

Btw, do you think it would be a good idea to introduce a prop like:

delimiterChars=" -_"

I'm asking since the component by default already ignores blanks when pasting a value.

[legraphista]

Btw, do you think it would be a good idea to introduce a prop like:

delimiterChars=" -_"

I'm asking since the component by default already ignores blanks when pasting a value.

Yes please, if you can!

[andreaswilli]

Another option would be to ignore everything that is not a valid character. I'm gonna give this some more thought.

[legraphista]

That might be a good option as well