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

Prop	Description	Type	Default
code	The unique identifier that sector manager will use to find this sector.	string	undefined
children	The elements that this sector needs to render	node	undefined
tagName	The type of element you want the wrapping sector to use. For example: span	string	div

SectorManager

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

Prop	Description	Type	Default
code	The unique identifier to render	string	undefined
sectors	The array of sectors that could potentially be rendered	node	undefined

Installation

npm install react-sector --save

Peer dependencies

• [email protected]
• [email protected]

npm install [email protected] [email protected] --save