import React from 'react';
import { importComponent, render } from 'hops';
const Text = importComponent('./text');
const loader = load =>
Promise.race([new Promise((_, reject) => setTimeout(reject, 10000)), load()]);
const renderText = ({ Component, loading, ...props }) => {
return loading ? <p>Fetching content…</p> : <Component {...props} />;
};
export function App() {
return <Text loader={loader} render={renderText} subject="world" />;
}
export default render(<App />);
import {
Header,
importComponent,
Miss,
render,
ServerDataContext,
Status,
ConfigContext,
withConfig,
} from 'hops';
import React from 'react';
import { Link, Redirect, Route, Switch } from 'react-router-dom';
import FlowText from './flow-text';
const Text = importComponent(() => import('./text'));
const Config = withConfig(({ config: { hoc } }) => <h1>{hoc}</h1>);
export default render(
<div>
<Link to="/two">Link to two</Link>
<ServerDataContext.Consumer>
{({ method }) => <output>{method}</output>}
</ServerDataContext.Consumer>
<Switch>
<Route path="/" exact render={() => <h1>home</h1>} />
<Route path="/two" exact render={() => <h1>two</h1>} />
<Route path="/status" exact render={() => <Status code={418} />} />
<Route path="/redirect" exact render={() => <Redirect to="/two" />} />
<Route
path="/header"