const defaultColor = [1,1,1];
const ExampleCommand = regl => ({
  vert: "…", 
  frag: "…", 
  uniforms: {
    color: ({color}) => color || defaultColor,
  },
  attributes: {
    position: …,
  },
  // Apart from this part everything here is standard regl
  instancedAttributes: {
    translation: new Float32Array(3),
  },
});

const Example = () => {
  const { Element, Batch } = useCommand(ExampleCommand);
  // 1 <Element> = 1 instance added to the command, or the closest <Batch> of the command that contains the <Element>
  
  return (
    <ReglEngine>
      {/* Batch props get added to the command's context */}
      <Batch color={[1,1,1]}>
        {/* Element props are sent to the command's buffers in `instancedAttributes` */}
        <Element translation={new Float32Array([0,2,0])} />
      </Batch>
    
      <Element translation={new Float32Array([0,0,0])} />
      
      <Batch color={[1,0,0]}>
        <Element translation={new Float32Array([0,5,0])} />
        <Element translation={new Float32Array([0,10,0])} />
      </Batch>
    </ReglEngine>
  );
}