Render any component to the document body

If you need a component to render outside of the default react child>parent structure "dialogs,popups etc" you can wrap any component within the RenderInBody higher order component. This will place the DOM rendered into a "Div" placed as a child of the document body.

Component Example

// Import the RenderInBody package
const RenderInBody = require('selkirk-react-render-in-body')

// Create component to be placed in document body
const Dialog = React.createClass({
    render(){
        return (
            <div className="dialog">
            I am on the document body
            </div>
        )
    }
});

//Export your componet wrapped by RenderInBody
module.exports = RenderInBody(Dialog)

Some other file

cont React = require("react")
const ReactDOM = require("react-dom")

// Import the Dialog component
const Dialog = require('dialog')

//Main app component that renders our dialog
const App = React.createClass({
    render(){
        return (
            <Dialog/>
        )
    }
})

ReactDOM.render(<App/>, document.getElementById('container'));

Boilerplate

The package is based on react-npm-boilerplate. This one is prepared to be used as a starter point for React components which needs to be published on Npm.

It includes linting with ESLint and testing with Mocha, Enzyme and JSDOM.

Also there is of course ES6 transpilation.

Basic Usage

1. Clone this repo
2. Inside cloned repo run npm install
3. If you want to run tests: npm test or npm run testonly or npm run test-watch. You need to write tests in __tests__ folder. You need at least Node 4 on your machine to run tests.
4. If you want to run linting: npm test or npm run lint. Fix bugs: npm run lint-fix. You can adjust your .eslintrc config file.
5. If you want to run transpilation to ES5 in dist folder: npm run prepublish (standard npm hook).