This module mainly serve to setup subapp-web with Facebook React framework.
It basically re-exports the module subapp-web and sets it up with React specific APIs.
For convenience, it also exports the module react
.
To use, a subapp's code should be doing:
import { React, loadSubApp } from "subapp-react";
import Component from "./component";
export default loadSubApp({ name: "MyComponent", Component });
For all pratical purposes, if there's code somewhere else that ensures subapp-web is setup with the proper React framework, then it's equivalent to the following:
import React from "react";
import { loadSubApp } from "subapp-web";
import Component from "./component";
export default loadSubApp({ name: "MyComponent", Component });
react
and react-dom
are specified as peerDependencies, so you must install them as part of your package.json
dependencies.
This module also exports a default React context that SSR uses to pass in server request
object to your React component.
ie:
import { AppContext } from "subapp-react";
const Component = () => {
return (
<AppContext.Consumer>
{({ isSsr, ssr, subApp }) => {
return (
<div>
IS_SSR: {`${Boolean(isSsr)}`} HAS_REQUEST: {ssr && ssr.request ? "yes" : "no"}
</div>
);
}}
</AppContext.Consumer>
);
};
If you want to use react-router in your application, then you need to install the dependencies:
ie:
npm i react-router react-router-dom
And then set the useReactRouter
flag to true in your subapp:
import { React, loadSubApp } from "subapp-react";
export default loadSubApp({ name: "MySubapp", Component, useReactRouter: true });
Copyright (c) 2016-present, WalmartLabs
Licensed under the Apache License, Version 2.0.