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<HTMLDivElement> { ref ?: React.Ref<HTMLDivElement>; }

ref?: React.Ref<HTMLDivElement>;

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

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

The release is available on:

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

Your semantic-release bot :package::rocket:

[typeform-ops-gha]

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

The release is available on:

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

Your semantic-release bot :package::rocket: