react-sector


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

npm install react-sector --saveNote: 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:

// Layoutreturn(<div><aside>{props.aside}</aside><main>{props.content}</main></div>);// Page / Scenereturn(<Layoutaside={(<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

// Layoutimport{SectorManager}from'react-sector';return(<div><aside><SectorManagercode="aside"sectors={props.children}/></aside><main><SectorManagercode="content"sectors={props.children}/></main></div>);// Page / Sceneimport{Sector}from'react-sector';return(<Layout><Sectorcode="aside"><div>Foo</div></Sector><Sectorcode="content"><div>Foo</div></Sector></Layout>);

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

API

Sector

importSectorfrom'react-sector/lib/Sector';// Recommended for smaller buildsimport{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

importSectorManagerfrom'react-sector/lib/SectorManager';// Recommended for smaller buildsimport{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

• react@15.3.0
• lodash@4.15.0

npm install react@15.3.0 lodash@4.15.0 --save