Skip to content

Commit d665268

Browse files
authored
Update README with context caveats
1 parent 812efda commit d665268

File tree

1 file changed

+76
-0
lines changed

1 file changed

+76
-0
lines changed

README.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -443,6 +443,82 @@ render(
443443

444444
## Caveats
445445

446+
### React Context API limitations
447+
448+
Because of a [React limitation preventing context to pass through renderers](https://github.com/facebook/react/issues/13336), new React Context API (react >= 16.3.0) cannot be used inside Stage inner components. Even if you're not using this feature directly, some of your dependencies may use it (react-redux, material-ui, ...).
449+
450+
A workaround would be to "make a bridge" between default renderer and react-pixi-fiber one. For example:
451+
```jsx harmony
452+
// use example
453+
export const App = () => {
454+
455+
return (
456+
<GameTitleContext.Provider value={'game title'}>
457+
<GameTitleContext.Consumer>
458+
{title => <h1>{title}</h1>}
459+
<GameTitleContext.Consumer>
460+
461+
<ContextBridge
462+
contexts={[
463+
GameTitleContext,
464+
ReactReduxContext,
465+
OtherContext,
466+
]}
467+
barrierRender={children => (
468+
<Stage options={{ height: 600, width: 800 }}>
469+
{children}
470+
</Stage>
471+
)}
472+
>
473+
<Container>
474+
<GameTitleContext.Consumer>
475+
{title => <Text text={title} />}
476+
</GameTitleContext.Consumer>
477+
</Container>
478+
</ContextBridge>
479+
</GameTitleContext.Provider>
480+
);
481+
};
482+
```
483+
484+
```jsx harmony
485+
// context-bridge component
486+
487+
/*
488+
* type ContextBridgeProps = {
489+
* contexts: React.Context<any>[];
490+
* barrierRender: (children: React.ReactElement | null) => React.ReactElement | null;
491+
* children: React.ReactNode;
492+
* };
493+
*/
494+
495+
export const ContextBridge = ({ barrierRender, contexts, children }) => {
496+
497+
const providers = values => {
498+
499+
const getValue = i => values[ values.length - 1 - i ];
500+
501+
return <>
502+
{contexts.reduce((innerProviders, Context, i) => (
503+
<Context.Provider value={getValue(i)}>
504+
{innerProviders}
505+
</Context.Provider>
506+
), children)}
507+
</>;
508+
};
509+
510+
const consumers = contexts.reduce((getChildren, Context) => (
511+
values => <Context.Consumer>
512+
{value => getChildren([ ...values, value ])}
513+
</Context.Consumer>
514+
), values => barrierRender(providers(values)));
515+
516+
return consumers([]);
517+
};
518+
```
519+
520+
More infos & workarounds: [#93](https://github.com/michalochman/react-pixi-fiber/issues/93) [#84 (comment)](https://github.com/michalochman/react-pixi-fiber/pull/84#issuecomment-437581875)
521+
446522

447523
## FAQ
448524

0 commit comments

Comments
 (0)