Use the Instance type for the ref prop

[DavidRouyer]

Hi there,

Can we get a more precise type for the ref returned by the component in TypeScript? Can it be an Instance type so we can access the instance methods? (show(), hide()...)

https://github.com/atomiks/tippyjs-react/blob/d5ee338c7e096ada3c8765d948bd54e38b3f8da0/index.d.ts#L14

[atomiks]

Can you provide an example of the usage? I personally didn't add that type so I'm unsure in this context

[aalexr]

Can you provide an example of the usage? I personally didn't add that type so I'm unsure in this context

I am trying to use Tippy as a popup date picker by placing react-calendar to content.

<Tippy
    content={<Calendar onChange={setDateAndHideTippy} />}
    ref={setTippyRef}
    trigger="click"
    interactive
   >
        <input type="text" value={date?.toLocaleString()} />
</Tippy>

I'd like Tippy to show when input is clicked on and to hide when date is selected. I tried to set triggerTarget to input and <Calendar /> but in that case Tippy is hiding on any click inside calendar (like changing month) which is not what I want. The only way I could think of to achieve this is to hide tippy manually in onChange event handler of Calendar. Maybe there is a better solution but my small brain was not able to come up with it :)

For now what I did looks like this. As you can see, I had to ts-ignore which is not as good as desired. If we could get instance of Instance (ha, see what I did there ;)))) somehow that would be amazing

// @ts-ignore
tippyRef._tippy.hide()