👌 ReactPixi
Edit page
AboutCDN Links
Context BridgeCustom ComponentsFallback to Canvas

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 '@inlet/react-pixi'
import { ReactReduxContext } from 'react-redux'
export const Stage = ({ children, ...props }) => {
return (
<ContextBridge Context={ReactReduxContext} render={children => <PixiStage {...props}>{children}</PixiStage>}>
// your App
const App = (
<SomeComponentUsingRedux />

Also see Context Bridge Concept