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