ContextBridge.mdx

name	route
Context Bridge	/context-bridge

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