Context not accessible inside Stage

[Ultre00]

I am trying to access a context where my game data will be stored. However this context is not accessible from children wrapped inside the Stage Component.

Setup:

interface GameState {
  pieces: number[],
  selected?: number
}

interface IGameManager {
  selectPiece: (piece: number) => void,
  gameState: GameState
}

const GameContext = React.createContext<IGameManager | undefined>(undefined);

const GameManager: FunctionComponent = props => {

  const [state, setState] = useState<GameState>({
    pieces: [
      1, 2, 3
    ],
    selected: 1,
  })

  const selectPiece = (piece: number) => {

  }

  return (
    <GameContext.Provider value={{ selectPiece: selectPiece, gameState: state }} {...props} />
  )
}

const Test: FunctionComponent = props => {
  const context = useContext(GameContext);
  console.log(context);
  return <div />
}

Console log works fine here:

function App() {
  return (
    <div>
      <GameManager>        
          <Test />
      </GameManager>
    </div>
  );
}

But this doesn't work:

function App() {
  return (
    <div>
      <GameManager>
        <Stage>
          <Test />
        </Stage>
      </GameManager>
    </div>
  );
}

Also I have never used PixiJS before and this is a first of using React in combination with TypeScript. If it is not possible to store game data with a context, is there a preffered way?

Additional info

• @inlet/react-pixi version: 6.1.1
• React version: 17.0.1
• ReactDOM version: 17.0.1
• PIXI version: 5.3.8

[inlet]

Duplicate #77

Unfortunately customer reconcilers cannot access its parent Context. This is a well known React issue, however you can bypass this with a simple Context Bridge component like this:

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

// stage
import { Stage as PixiStage } from '@inlet/react-pixi';

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

[qpwo]

Now that is a useful trick

[qpwo]

Typescript version for future readers

export default function ContextBridge<T>(props: {
    children: React.ReactNode
    Context: React.Context<T>
    render: (children: React.ReactNode) => JSX.Element
}): JSX.Element {
    const Context = props.Context
    const result = <Context.Consumer>
        {(value) => props.render(<Context.Provider value={value}>{props.children}</Context.Provider>)}
    </Context.Consumer>
    return result
}

[qpwo]

If you try to make to have a prop Parent: React.FC<{ children: React.ReactNode }> then your likely to have an unfixable runtime react error in development mode where it can't verify children is valid children. See here: https://stackoverflow.com/questions/49274143/react-typescript-hoc-passing-component-as-the-prop