docs/dist/flummox/docs/api/higher-order-component.md/index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Flummox | Minimal, isomorphic Flux</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/flummox/css/app.min.css">
</head>
<body>
<div id="app"><div data-reactid=".1264lyaq5fk" data-react-checksum="36051878"><div style="height:2.25rem;" class="View" data-reactid=".1264lyaq5fk.0"><div class="View" style="background-color:#2083E0;position:fixed;width:100%;z-index:9999;" data-reactid=".1264lyaq5fk.0.0"><div class="View" data-reactid=".1264lyaq5fk.0.0.0"><div class="View" data-reactid=".1264lyaq5fk.0.0.0.0"><a href="/" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.0.0.0">Flummox</a></div></div><div class="View View--justifyContentFlexEnd View--flexGrow" data-reactid=".1264lyaq5fk.0.0.1"><div class="View" data-reactid=".1264lyaq5fk.0.0.1.0"><a href="/flummox/docs/guides" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.0.0">Guides</a><div class="View View--flexDirectionColumn" style="display:none;background-color:#2083E0;position:absolute;right:0;top:100%;width:16em;text-align:right;" data-reactid=".1264lyaq5fk.0.0.1.0.1"><div class="View" data-reactid=".1264lyaq5fk.0.0.1.0.1.0"><a href="/flummox/docs/guides/quick-start" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.0.1.0.0">Quick Start</a></div><div class="View" data-reactid=".1264lyaq5fk.0.0.1.0.1.1"><a href="/flummox/docs/guides/react-integration" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.0.1.1.0">React Integration</a></div><div class="View" data-reactid=".1264lyaq5fk.0.0.1.0.1.2"><a href="/flummox/docs/guides/why-flux-component-is-better-than-flux-mixin" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.0.1.2.0">Why FluxComponent > fluxMixin</a></div></div></div><div class="View" data-reactid=".1264lyaq5fk.0.0.1.1"><a href="/flummox/docs/api" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.1.0">API</a><div class="View View--flexDirectionColumn" style="display:none;background-color:#2083E0;position:absolute;right:0;top:100%;width:16em;text-align:right;" data-reactid=".1264lyaq5fk.0.0.1.1.1"><div class="View" data-reactid=".1264lyaq5fk.0.0.1.1.1.0"><a href="/flummox/docs/api/store" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.1.1.0.0">Store</a></div><div class="View" data-reactid=".1264lyaq5fk.0.0.1.1.1.1"><a href="/flummox/docs/api/flux" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.1.1.1.0">Flux</a></div><div class="View" data-reactid=".1264lyaq5fk.0.0.1.1.1.2"><a href="/flummox/docs/api/actions" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.1.1.2.0">Actions</a></div><div class="View" data-reactid=".1264lyaq5fk.0.0.1.1.1.3"><a href="/flummox/docs/api/fluxcomponent" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.1.1.3.0">FluxComponent</a></div><div class="View" data-reactid=".1264lyaq5fk.0.0.1.1.1.4"><a href="/flummox/docs/api/higher-order-component" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.1.1.4.0">Higher-order component</a></div><div class="View" data-reactid=".1264lyaq5fk.0.0.1.1.1.5"><a href="/flummox/docs/api/fluxmixin" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.1.1.5.0">fluxMixin</a></div></div></div><div class="View" data-reactid=".1264lyaq5fk.0.0.1.2"><a href="https://github.com/acdlite/flummox" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".1264lyaq5fk.0.0.1.2.0">GitHub</a></div></div></div></div><span data-reactid=".1264lyaq5fk.1"><div data-reactid=".1264lyaq5fk.1.$=1$/flummox/docs/api/higher-order-component"><article class="Doc" style="padding:3rem 0;" data-reactid=".1264lyaq5fk.1.$=1$/flummox/docs/api/higher-order-component.0"><div class="Container" data-reactid=".1264lyaq5fk.1.$=1$/flummox/docs/api/higher-order-component.0.0"><div class="Doc-content" data-reactid=".1264lyaq5fk.1.$=1$/flummox/docs/api/higher-order-component.0.0.0"><h1>Higher-order Flux Component</h1>
<p><strong>Requires React 0.13. If you’re still on React 0.12, use FluxComponent instead.</strong></p>
<p>A higher-order component form of <a href="fluxcomponent.md">FluxComponent</a>. Here’s an example from the <a href="https://github.com/acdlite/flummox/blob/master/docs/src/shared/components/HomeHandler.js#L15-L19">Flummox documentation app</a>:</p>
<pre><code class="language-js">class HomeHandler extends React.Component {
render() {
const { doc } = this.props;
if (!doc) return <span />;
return <Doc doc={doc} />;
}
}
HomeHandler = connectToStores(HomeHandler, {
docs: store => ({
doc: store.getDoc('index')
})
});
</code></pre>
<p><strong>Note</strong>: FluxComponent, fluxMixin, and the higher-order component implement the same <a href="https://github.com/acdlite/flummox/blob/master/src/addons/reactComponentMethods.js">interface</a>. Eventually the docs will updated to make this clearer.</p>
</div></div></article></div></span></div></div>
<script src="/flummox/js/app.min.js" defer></script>
</body>
</html>