Skip to content

Instantly share code, notes, and snippets.

@eddywashere
Created Feb 7, 2016
Embed
What would you like to do?
higher order layout component example in React
import React from 'react';
import { render } from 'react-dom';
import {PageContent, PageSidebar} from './Content';
import Layout from './Layout';
const Example = Layout({Content: PageContent, Sidebar: PageSidebar});
render(Example, document.getElementById('app'))
import React from 'react';
class PageContent extends React.Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<h2>Content</h2>
<p>Main content</p>
</div>
)
}
}
PageContent.displayName = 'PageContent';
class PageSidebar extends React.Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici.</p>
</div>
)
}
}
PageSidebar.displayName = 'PageSidebar';
export {PageContent, PageSidebar};
import React from 'react'
function Layout(components) {
const { Content, Sidebar } = components;
class Component extends React.Component{
constructor(props){
super(props);
}
getSidebar(){
if(!Sidebar){
return null;
}
return (
<div className="Sidebar">
<Sidebar {...this.props} />
</div>
);
}
render() {
// mock sidebar/content layout
return (
<div key="dashboard">
{this.getSidebar()}
<div className="Content">
<Content {...this.props}/>
</div>
</div>
);
}
}
Component.propTypes = {
route: React.PropTypes.object.isRequired,
};
Component.displayName = 'Layout';
return Component;
}
export default Layout;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment