diff --git a/README.md b/README.md index acfa598..451cd0d 100644 --- a/README.md +++ b/README.md @@ -443,6 +443,82 @@ render( ## Caveats +### React Context API limitations + +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, ...). + +A workaround would be to "make a bridge" between default renderer and react-pixi-fiber one. For example: +```jsx harmony +// use example +export const App = () => { + + return ( + + + {title =>

{title}

} + + + ( + + {children} + + )} + > + + + {title => } + + + +
+ ); +}; +``` + +```jsx harmony +// context-bridge component + +/* + * type ContextBridgeProps = { + * contexts: React.Context[]; + * barrierRender: (children: React.ReactElement | null) => React.ReactElement | null; + * children: React.ReactNode; + * }; + */ + +export const ContextBridge = ({ barrierRender, contexts, children }) => { + + const providers = values => { + + const getValue = i => values[ values.length - 1 - i ]; + + return <> + {contexts.reduce((innerProviders, Context, i) => ( + + {innerProviders} + + ), children)} + ; + }; + + const consumers = contexts.reduce((getChildren, Context) => ( + values => + {value => getChildren([ ...values, value ])} + + ), values => barrierRender(providers(values))); + + return consumers([]); +}; +``` + +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) + ## FAQ