lay-it-out
React HOC and helper for complex layouts
When layouts get complex and you have to write a lot of jsx over and over again, this approach may help reuse layouts in a readable way.
Also tested with SSR (next.js). More test coming soon.
If you tried this package with other SSR methods or with react-native , please let me know if it's work ;)
Install
npm install --save lay-it-outUsage
Create a layout:
// Layout.js
import React from 'react'
import { withLayout } from 'lay-it-out';
const LayoutTemplate = ({ child }) => (
<div className="layout-xyz">
<header>{ child.header }</header>
{ child.intro }
<aside>
{ child.sidebar }
<div className="special">
{ child.specialPlace }
</div>
</aside>
<footer>{ child.creditNotes }</footer>
</div>
);
export const Layout = withLayout(LayoutTemplate);Use your layout like this:
// App.js
import React from 'react'
import { Place } from 'lay-it-out';
import { Layout } from './Layout';
const App = () => (
<Layout>
<Place toBe="header">
<h1>Here is the header</h1>
</Place>
<Place toBe="intro">
<h2>intro headline</h2>
<p>intro text</p>
</Place>
<Place toBe="sidebar">
<h3>Sidebar</h3>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</Place>
<Place toBe="specialPlace">
<h4>specialPlace</h4>
<p>special text</p>
</Place>
<Place toBe="creditNotes">
Thanks for watching.
</Place>
</Layout>
);
additional props
It's possible to pass additional props to your layout. For example to toggle stuff:
// Layout.js
import React from 'react'
import { withLayout } from 'lay-it-out';
const LayoutTemplate = ({ child, hasSidebar, className }) => (
<div className={`layout-xyz ${className}`}>
<header>{ child.header }</header>
{ child.intro }
{
hasSidebar
&& (<aside>{ child.sidebar }</aside>)
}
<footer>{ child.creditNotes }</footer>
</div>
);
export const Layout = withLayout(LayoutTemplate);// App.js
const App = () => (
<Layout className="additional-classname" hasSidebar>
<Place toBe="header">
...collision with prop name "child"
You can set an option object to prevent prop name collision of "child".
// Layout.js
import React from 'react'
import { withLayout } from 'lay-it-out';
const LayoutTemplate = ({ myCustomPropName }) => (
<div className="layout-xyz">
<header>{ myCustomPropName.header }</header>
<aside>{ myCustomPropName.sidebar }</aside>
<footer>{ myCustomPropName.creditNotes }</footer>
</div>
);
export const Layout = withLayout(
LayoutTemplate,
{ customChildPropName: 'myCustomPropName' },
);License
MIT © christianheyn
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)