diff --git a/README.md b/README.md index 02186ea..e0f9480 100644 --- a/README.md +++ b/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 diff --git a/src/components/GalleryItem/GalleryItem.tsx b/src/components/GalleryItem/GalleryItem.tsx index 471f2ef..e6e60b5 100644 --- a/src/components/GalleryItem/GalleryItem.tsx +++ b/src/components/GalleryItem/GalleryItem.tsx @@ -12,7 +12,7 @@ import GalleryItemContext from "./GalleryItemContext"; * @param children The children to render. */ export const GalleryItem = React.forwardRef( - ({ 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( }, [material, mesh]); return ( - + {children} ); diff --git a/src/components/GalleryItem/GalleryItem.types.ts b/src/components/GalleryItem/GalleryItem.types.ts index c91c1dd..535acbb 100644 --- a/src/components/GalleryItem/GalleryItem.types.ts +++ b/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.