React Multi-Regl

A react-regl container and renderer with multi-regl support.

Install

Recommended: multi-regl @ 1.1.x

npm install --save @psychobolt/react-multi-regl
# or
yarn add @psychobolt/react-multi-regl

Examples

See demos. Also check out their sources. Here is one to get you started:

import React from 'react';
import { View, Frame } from '@psychobolt/react-regl';
import { MultiReglContainer } from '@psychobolt/react-multi-regl';

import Subviews, { VIEW_COUNT, onFrame } from './Subviews';

<MultiReglContainer View={Subviews} viewCount={VIEW_COUNT}>
  {views => views.map((view, i) => <View element={view}><Frame onFrame={onFrame[i]} /></View>)}
</MultiReglContainer>

Subview component recieves a ref prop from MultiReglContainer. This allows the use of a child function, to create sub context for each view. How the ref prop is forwarded to each sub view depends on the Subiews component implementation.

Components

MultiReglContainer

Extends ReglContainer with a multi-regl renderer and provides view elements. See example above.

Props

viewCount?: number

The container will pause mounting the children until the collected view count is greater than this number. Default value is -1 (mount immediately).

Types

View

Creates a sub context which is passed down to its children.

Props

Remaining props are passed to regl as initialization options.

element: Element

A reference to a DOM object.

API

MultiReglRenderer

Extends ReglRenderer.