React Liberator

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

This feature is the basis for building a proper windowing system (in any technology).

📺 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

⚡ 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={active}>
    <div>Popup</div>
</Liberator>

Or render it to a predefined div:

<Liberator layerId={layerId}>
    <div>Popup</div>
</Liberator>

🚚 Installation

Use it as the NPM package:

npm install react-liberator --save

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

Or 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.

🚀 Run the hot-loader build (local)

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.

✈️ Run the minified demo build

npm run demo

This should build the demo folder. This is how the demo is built.

🚁 Run the non-minified demo build

npm run debug

This should build the demo folder. Non-minified for easier debugging.

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

npm install http-server
http-server

Thanks to:

🚀 React Transform Boilerplate for workflow.