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"
exact
render={() => <Header name="X-Foo" value="Bar" />}
/>
<Route path="/flow" exact render={() => <FlowText text="flow" />} />
<Route path="/import" exact render={() => <Text text="imported" />} />
<Route path="/config-hoc" exact render={() => <Config />} />
<Route
path="/config-context"
exact
render={() => (
<ConfigContext.Consumer>
{({ context }) => <h1>{context}</h1>}
</ConfigContext.Consumer>
)}
/>
<Miss />
</Switch>
</div>
);
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 />);
(state) => state[namespace],
{
update: createAction(namespace)
}
)(
createClass({
displayName: 'Home',
propTypes: {
greeting: PropTypes.string,
update: PropTypes.func
},
componentDidMount() {
const { update } = this.props;
update({'greeting': {'$set': 'Hello World!'}});
},
render() {
const { greeting } = this.props;
return (
<h1 className={ headline }>{ greeting }</h1>
);
}
})
);
export const routes = (
<Route path='/' component={ Home }/>
);
export const reducers = {[namespace]: createReducer(namespace)};
export default render({ routes, reducers });