Repository navigation
TypeScript React 19 support #5094
Description
I didn't see this in the documentation anywhere, so I am discussing it here. I wanted to use model-viewer web component within React with full type safety.
The solution I came upon was this: modelviewer.d.ts:
import { ModelViewerElement } from '@google/model-viewer';
import { DetailedHTMLProps, HTMLAttributes } from 'react';
// Model-viewer specific properties. This gives us all the standard
// props like `className`, `style`, `children`, etc., plus the component-specific ones.
type ModelViewerProps = DetailedHTMLProps<
HTMLAttributes<ModelViewerElement>,
ModelViewerElement
> & {
src?: string;
alt?: string;
poster?: string;
loading?: 'eager' | 'lazy' | 'auto';
reveal?: 'auto' | 'interaction' | 'manual';
ar?: boolean;
'ar-modes'?: string;
'ar-scale'?: 'auto' | 'fixed';
'camera-controls'?: boolean;
'auto-rotate'?: boolean;
'auto-rotate-delay'?: string; // number as string
'shadow-intensity'?: string; // number as string
'environment-image'?: string;
'animation-name'?: string;
autoplay?: boolean;
'camera-orbit'?: string;
// Add other model-viewer specific props here as needed
};
declare module 'react' {
namespace JSX {
interface IntrinsicElements {
'model-viewer': ModelViewerProps;
}
}
}I think you can probably tighten the typing a bit, maybe with regex or template literals but this is better than nothing.
If nothing else, maybe we want to add this to the documentation?
I did ask Google Gemini if it was possible to seamlessly install React typing into the model viewer project and it wrote this report, but this seems like a lot of changes:
https://docs.google.com/document/d/1LIrdFWK7LZAfF3TIEJrA2JSfhceAbw8TAX0BzxHTnco/edit?tab=t.0
Activity