How to add type definitions for model-viewer methods in React

[misaelvillaverde]

I'm having some trouble finding how should I declare the definitions for the model-viewer methods (like toBlob), the error I'm getting right now is:

I have the following definition for the model-viewer as an IntrinsicElement on the global jsx scope:

declare global {
    namespace JSX {
        interface IntrinsicElements {
            "model-viewer": {
                src: string;
                "ios-src"?: string;
                "camera-controls"?: boolean;
                "disable-zoom"?: boolean;
                "auto-rotate"?: boolean;
                ar?: boolean;
                autoplay?: boolean;
                "shadow-intensity"?: number | string;
                "ar-scale"?: number | string;
                toBlob?: () => Promise<Blob>;
            } & React.DetailedHTMLProps<
                React.HTMLAttributes<HTMLElement>,
                HTMLElement
            >;
        }
    }
}

Have you guys had this problem before?

[elalish]

I think you need to specify the types of its arguments as well. We're trying to make this easier with our next release; Ideally you should be able to import our lib and get all our TS declarations automatically.

[misaelvillaverde]

Hi, thanks for the response, that's cool I'm eager to have those definitions 👍, meanwhile, I found a pretty obvious solution to my issue (just in case anyone has this issue), I was defining the reference this way: const myRef = useRef<"model-viewer">(); Thinking that it takes its definition from the JSX IntrinsicElements interface, but I realized that instead, it looks upon the React DOM Library interfaces (HTMLElement, etc) meaning that it takes any arbitrary interface, so I just had to create my own ModelViewer interface this way:

export interface ModelViewer
    extends Omit<
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        "ref"
    > {
    src: string;
    "ios-src"?: string;
    "camera-controls"?: boolean;
    "disable-zoom"?: boolean;
    "auto-rotate"?: boolean;
    ar?: boolean;
    autoplay?: boolean;
    "shadow-intensity"?: number | string;
    "ar-scale"?: number | string;
    style?: React.CSSProperties;
    ref?: React.MutableRefObject<ModelViewer>;
    toBlob?: ({ idealAspect }: { idealAspect: boolean }) => Promise<Blob>;
}

// Add model-viewer to the IntrinsicElements list
declare global {
    namespace JSX {
        interface IntrinsicElements {
            "model-viewer": ModelViewer;
        }
    }
}

// And declare the ref this way:
const myRef = useRef<ModelViewer>();

[misaelvillaverde]

Is it fine if I mark this as an answer? I'm new to this discussion feature 😂

[elalish]

Absolutely! Would be great to have more answers marked. I feel bad doing it myself, but I may have to start...