Integrated MeshProps forwarding for GalleryItem

README.md

@@ -457,12 +457,12 @@ This allows you to customize the appearance of the gallery item.
 
 #### Props
 ```tsx
-type GalleryItemProps = PropsWithChildren<{
+type GalleryItemProps = MeshProps & {
   /**
    * The material to apply to the gallery item.
    */
   material: Material | Material[];
-}>;
+};
 ```
 
 #### Example Usage

src/components/GalleryItem/GalleryItem.tsx

@@ -12,7 +12,7 @@ import GalleryItemContext from "./GalleryItemContext";
  * @param children The children to render.
  */
 export const GalleryItem = React.forwardRef<Mesh, GalleryItemProps>(
-  ({ material, children }, ref) => {
+  ({ material, children, ...rest }, ref) => {
     const itemData = useContext(GalleryItemContext);
     if (itemData === GALLERY_ITEM_NO_PROVIDER_FLAG) {
       throw new Error("GalleryItem must be a child of Gallery");
@@ -77,7 +77,7 @@ export const GalleryItem = React.forwardRef<Mesh, GalleryItemProps>(
     }, [material, mesh]);
 
     return (
-      <primitive object={mesh} ref={ref}>
+      <primitive object={mesh} ref={ref} {...rest}>
         {children}
       </primitive>
     );

src/components/GalleryItem/GalleryItem.types.ts

@@ -1,4 +1,3 @@
-import { PropsWithChildren } from "react";
 import {
   Material,
   MeshBasicMaterial,
@@ -10,6 +9,7 @@ import {
   PointsMaterial,
   SpriteMaterial,
 } from "three";
+import { MeshProps } from "@react-three/fiber";
 
 /**
  * A flag to indicate that the gallery item has no provider.
@@ -27,12 +27,12 @@ export interface GalleryItemState {
 /**
  * The GalleryItem component properties.
  */
-export type GalleryItemProps = PropsWithChildren<{
+export type GalleryItemProps = MeshProps & {
   /**
    * The material to apply to the gallery item.
    */
   material: Material | Material[];
-}>;
+};
 
 /**
  * This type represents materials having a map property.