Skip to main content

Context Bridge

By design React don't let you propagate parent contexts in child components from a custom renderers. For example when you're using a state manager like Redux. This means that you cannot directly access a parent context within a <Stage> or its children.

⚡️ Solution: use a context bridge:

The workaround is to use a Context Bridge where we feed a context to a child component that is rendered in a custom renderer/reconciler.


// the context bridge:
const ContextBridge = ({ children, Context, render }) => {
return (
{(value) =>
render(<Context.Provider value={value}>{children}</Context.Provider>)

// your Stage:
import { Stage as PixiStage } from '@pixi/react';
import { ReactReduxContext } from 'react-redux';

export const Stage = ({ children, ...props }) => {
return (
render={(children) => <PixiStage {...props}>{children}</PixiStage>}

// your App
const App = (
<SomeComponentUsingRedux />

Also see Context Bridge Concept