hmans/miniplex

[miniplex-react] Pass along any extra props of `Entities` to the `as` component

verekia opened this issue · 1 comments

const Enemy = ({ entity, someExtraProp }: { entity: Entity, someExtraProp: number }) => {
  // ...
}

const Enemies = <Entities in={bucket} as={Enemy} someExtraProp={10} />

This is convenient to avoid having to create a context to pass along some data from the parent to the as component.

An example of actual use case is to pass along instanced meshes provided by Drei Merged:

const Enemy = ({ entity, BodyMesh, SwordMesh, ShieldMesh }) => (
  <group position={entity.position}>
    <BodyMesh />
    <SwordMesh />
    <ShieldMesh />
  </group>
)

const Enemies = 
  <Merged meshes={[body, sword, shield]}>
    {(BodyMesh, SwordMesh, ShieldMesh) => (
      <Entities
        in={bucket}
        as={Enemy}
        BodyMesh={BodyMesh}
        SwordMesh={SwordMesh}
        ShieldMesh={ShieldMesh} />
    )}
  </Merged>

For reference, this can also be done with:

const Enemies = (
  <Entities in={bucket}>
    {e => <Enemy entity={e} someExtraProp={10} />}
  </Entities>
)

or:

<Entities in={bucket} children={e => <Enemy entity={e} someExtraProp={10} />

or:

<Entities in={bucket} as={({ entity }) => <Enemy entity={entity} someExtraProp={10} />} />