react-sector v0.1.3

react-sector


This library was built to make building React templates / layouts easier.

npm install react-sector --save Note: There are peer dependencies. See installation

How often have you found yourself building a reusable layout in React only to have to pass the content for different sections via props (which looks messy)?

For example:

// Layout
return (
  <div>
    <aside>
      {props.aside}
    </aside>

    <main>
      {props.content}
    </main>
  </div>
);

// Page / Scene

return (
  <Layout
    aside={(
      <div>Foo</div>
    )}
    content={(
      <div>Bar</div>
    )}/>
);

Wouldn't it be easier if you could render sections via components? and have them all passed in cleanly using children? With react-sector you can! (Cue the infomercial music).

Usage

// Layout
import { SectorManager } from 'react-sector';

return (
  <div>
    <aside>
      <SectorManager code="aside" sectors={props.children} />
    </aside>

    <main>
      <SectorManager code="content" sectors={props.children} />
    </main>
  </div>
);

// Page / Scene
import { Sector } from 'react-sector';

return (
  <Layout>
    <Sector code="aside">
      <div>Foo</div>
    </Sector>

    <Sector code="content">
      <div>Foo</div>
    </Sector>
  </Layout>
);

That's it. Sector manager will now take care of rendering your elements for you.

API

Sector

import Sector from 'react-sector/lib/Sector'; // Recommended for smaller builds
import { Sector } from 'react-sector';

SectorManager

import SectorManager from 'react-sector/lib/SectorManager'; // Recommended for smaller builds
import { SectorManager } from 'react-sector';

Installation

npm install react-sector --save

Peer dependencies

• react@15.3.0
• lodash@4.15.0

npm install react@15.3.0 lodash@4.15.0 --save