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.

Example:

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

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

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

// your App
const App = (
  <Stage>
    <SomeComponentUsingRedux />
  </Stage>
);

Also see Context Bridge Concept