❤
npm
Sign UpSign In

lay-it-out

1.1.4 • Public • Published

lay-it-out

NPM Build Status

A helper for building complex react components with multiple child areas.

Install

npm install --save lay-it-out

Usage

Imagin you want to build a component like this:

Modal example image

And of course all the child elements are variable. You could do it like this:

import React from 'react'
import { withLayout, Place } from 'lay-it-out';
 
const Modal = ({ headerComponent, contentComponent, footerComponent }) => (
    <section className="modal">
        <header className="modal-header">
            {headerComponent}
        </header>
        <div className="modal-content">
            {contentComponent}
        </div>
        <footer className="modal-footer">
            {footerComponent}
        </footer>
    </section>
)
 
const App = () => (
    <Modal
        headerComponent={<h2><small>the</small> Header</h2>}
        contentComponent={<h1><small>the</small> Content</h1>}
        footerComponent={<button>Ok, cool!</button>}
    />
);

Or you are using lay-it-out

import React from 'react'
import { withLayout, Place } from 'lay-it-out';
 
const _Modal = ({ children, child }) => (
    <section className="modal">
        <header className="modal-header">
            {child.header}
        </header>
        <div className="modal-content">
            {children}
        </div>
        <footer className="modal-footer">
            {child.footer}
        </footer>
    </section>
)
 
const Modal = withLayout(_Modal);
 
const App = () => (
    <Modal open>
        <Place toBe="header">
            <h2><small>the</small> Header</h2>
        </Place>
 
        <h1><small>the</small> Content</h1>
 
        <Place toBe="footer">
            <button>Ok, cool!</button>
        </Place>
    </Modal>
);
 
export default App;

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, Place } from 'lay-it-out';
 
const _Modal = ({ children, myCustomPropName }) => (
    <section className="modal">
        <header className="modal-header">
            {myCustomPropName.header}
        </header>
        <div className="modal-content">
            {children}
        </div>
        <footer className="modal-footer">
            {myCustomPropName.footer}
        </footer>
    </section>
)
 
const Modal = withLayout(_Modal, { customChildPropName: 'myCustomPropName' });

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 ;)

License

MIT © christianheyn

Readme

Keywords

Package Sidebar

Install

npm i lay-it-out

Repository

github.com/christianheyn/lay-it-out

Homepage

github.com/christianheyn/lay-it-out#readme

Weekly Downloads

1

Version

1.1.4

License

MIT

Unpacked Size

28.4 kB

Total Files

7

Last publish

Collaborators

  • christianheyn
Try on RunKit
Report malware