TypeScript React 19 support

[bhouston]

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