👌 ReactPixi
Edit page
AboutCDN Links
Components
Context BridgeCustom ComponentsFallback to Canvas
HOC
HooksReact-SpringRenderStageTypeScript

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 '@inlet/react-pixi'
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