0.0.11 • Published 8 years ago
react-region v0.0.11
React Region
Description
React Region component lets you mount components by passing plain objects to its region
prop.
Why
Useful for automating components using plain objects.
Installation
npm i --save react-region
Demo
npm start dev
then visit http://127.0.0.1:3000
Usage
import { makeRegion } from 'react-region';
import Example from './Example';
// Configure which components can be mounted in regions.
const Region = makeRegion({
Example
});
// In real world these data would come from e.g. a JSON file. Careful with XSS
// if you do that over the network.
const region = [{
type: 'Example',
props: {
key: 'some-example',
test: 'This is an example component',
className: 'some-class',
children: [
//...
]
}
}];
<Region region={ region }/>
With arbitrary data
<Region id='wrapper' className='wrapper'>
{ state => (
<div className={ 'some-class ' + (state && state.className ? state.className : '') }>
hello <span style={ state && state.style ? state.style : null }>world</span>
</div>
) }
</Region>