Typescript: type issue with components ref

[TommyBacco]

It looks like there is some misalignment in the types when passing a ref making necessary to suppress the type error in order to proceed and use the components programmatically.

[Emkay2309]

Does Sidetab component excepts ref or not ???
Check that first ,
if it does try providing a type to ref as well

interface SidetabProps extends React.HTMLAttributes {
ref ?: React.Ref;
}

ref?: React.Ref;

[FranRom]

The same is happening in the PopupButton and ref is in the documentation:
https://github.com/Typeform/embed/tree/main/packages/embed-react#passing-a-custom-ref

The error I get is:
Type '{ children: string; ref: MutableRefObject<undefined>; id: string; hidden: { user: string; }; className: string; onSubmit: () => void; }' is not assignable to type 'IntrinsicAttributes & BaseOptions & ModalWindowOptions & UrlOptions & ActionableOptions & ... 5 more ... & ButtonComponentBaseProps'. Property 'ref' does not exist on type 'IntrinsicAttributes & BaseOptions & ModalWindowOptions & UrlOptions & ActionableOptions & ... 5 more ... & ButtonComponentBaseProps'

[mathio]

Hello @TommyBacco @FranRom

how do you define your ref? When i define it like this it works for me:

const ref = useRef();

There are no TS errors on props or ref:

But it is true the ref is not typed properly, as it does not define the open method.
I will look into this, if we can supply correct types on our side. In the meantime, as a workaround, I'd suggest typing as any.

Edit: Actually we do have a GenericEmbed type that you can use on your side to type the ref, like this:

import { GenericEmbed } from "@typeform/embed-react/build/components";
const ref = useRef<GenericEmbed>();
const openPopup = () => ref.current?.open();

[mathio]

Actually you are right. I was building my test project via vite. When I build with tsc --build the typescript did complain.

It proved to be quite challenging to type properly when we reuse React's forwardRef. I am renaming the prop instead to embedRef (since this is not actually a DOM element ref). Upcoming @typeform/embed-react version will introduce this breaking change in #657.

[typeform-ops-gha]

🎉 This issue has been resolved in version @typeform/embed-v5.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[typeform-ops-gha]

🎉 This issue has been resolved in version @typeform/embed-react-v4.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀