React Liberator

Enables React component to render its DOM away from its siblings.

This is the foundation for building a proper windowing system.

📺 Demo

http://dkozar.github.io/react-liberator/

• Demo 1 - Liberate!
• Demo 2 - Popup
• Demo 3 - Activate / deactivate
• Demo 4 - Maximized popup
• Demo 5 - Full screen sync
• Demo 6 - Multiple children

⚡️ Usage

// ES6
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';
import Liberator from './Liberator';
 
export class App extends Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
            text: 'I\'m rendered in an overlay'
        };
    }
 
    render() {
        return (
            <div>
                <Button>The sibling</Button>
                <Liberator>
                    <div>{this.state.text}</div>
                </Liberator>
            </div>
        );
    }
}
 
render(<App />, document.body);

Or use it as a switch:

<Liberator active={this.state.active}>
    <div>Popup</div>
</Liberator>

Or render it to the predefined element:

<Liberator layerId="foo">
    <div>Popup</div>
</Liberator>
 
<div id="foo"></div>

Use callbacks:

<Liberator onActivate={function(e) {console.log('onActivate', e)}}
    onDeactivate={function(arg) {console.log('onDeactivate', e)}}>
    <div>Popup</div>
</Liberator>

These callbacks are being executed with an object as argument:

{
   layer: // the layer to which liberated components are rendered to (multiple Liberators could render into the same layer)
   wrapper: // wrapper element for component rendered by THIS Liberator
   children: // original children provided to THIS Liberator
}

🚚 Installation

Option A - use it as NPM plugin:

npm install react-liberator --save

This will install the package into the node_modules folder of your project.

Option B - download the project source:

git clone https://github.com/dkozar/react-liberator.git
cd react-liberator
npm install

npm install will install all the dependencies (and their dependencies) into the node_modules folder.

Then, you should run one of the builds.

🏭 Builds

🚀 Hot-loader development build

npm start
open http://localhost:3000

This will give you the build that will partially update the browser via webpack whenever you save the edited source file.

Additionally, it will keep the React component state intact.

For more info on React hot-loader, take a look into this fantastic video.

🚁 Demo build

npm run demo

This should build the minified demo folder (it's how the demo is built).

npm run debug

This should build the non-minified demo folder (for easier debugging).

You could install the http-server for running demo builds in the browser:

npm install http-server
http-server

🚂 Additional builds

npm run build

Runs Babel on source files (converting ES6 and React to JS) and puts them into the build folder.

npm run dist

Builds the webpackUniversalModuleDefinition and puts it into the dist folder.

npm run all

Runs all the builds: build + dist + demo.

👍 Thanks to:

🚀 React Transform Boilerplate for the workflow.

📷 Screenshots: