Merged: type defs for children

[oveddan]

The Merged feature is awesome! For merged, it's hard to know how to use the child components with typescript. It would be great if there was a storybook example using typescript.

[itsdouges]

I'll look into this, starting to use the Merged component and getting hit by it :-)

[mustafalazzawe]

Also running into issues with Merged while using typescript, would anyone have any examples I can refer to?

[Archimagus]

Same. Still not example of what type to use for the callback.

[david-urvoy]

Here is a simplified example of what worked for me in order to define such a type, for those who encounter a Typescript error on the <Merged> children callback :

import { Merged } from '@react-three/drei'
import { MeshProps } from '@react-three/fiber'
import { ReactNode } from 'react'
import { BoxGeometry, Mesh } from 'three'

// Define this wherever your project's custom type system is, or declare this type on the callback's parameter
// to fix the missing type inference
export type MergedMesh = (props: MeshProps) => ReactNode

const Component = () => {
    // As stated in Drei's Merged documentation, you require a THREE.Mesh instance, not the RTF equivalent.
    const box = new Mesh(new BoxGeometry())

    return <Merged meshes={[box]}>
        {
            (Box: MergedMesh) =>
                <>
                    <Box position={[…]}/>
                    // … other instances
                    // <Box position={[…]}/>
                </>
        }
    </Merged>
}

[github-actions[bot]]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

[github-actions[bot]]

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!