akofman / react-region

React Region component

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>