[](https://travis-ci.org/jshthornton/react-sector) [](https://badge.fury.io/js/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:
`` javascript
// Layout
return (
{props.content}
);
// Page / Scene
return (
`
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).
`javascript
// Layout
import { SectorManager } from 'react-sector';
return (
// Page / Scene
import { Sector } from 'react-sector';
return (
Foo
Foo
);
`
That's it. Sector manager will now take care of rendering your elements for you.
`javascript
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 |
`javascript
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 |
npm install react-sector --save
* react@15.3.0
* lodash@4.15.0
npm install react@15.3.0 lodash@4.15.0 --save`