pradel/react-minimalist-portal

A minimalist portal for react

react-minimalist-portal

A minimalist portal for react. Create a new React tree in document.body to create modal etc .. This package is compatible with react 15 and 16.

Usage

import React from 'react';
import Portal from 'react-minimalist-portal';

export default class App extends React.Component {
  render() {
    return (
      <Portal>
        <p>I am in document body.</p>
      </Portal>
    );
  }
}

// If you want to render the portal inside your own container
const container = document.getElementById('my-custom-container-id');

export default class App extends React.Component {
  render() {
    return (
      <Portal container={container}>
        <p>I am in my-custom-container-id.</p>
      </Portal>
    );
  }
}

Props

• container - optional - You can specify a container prop which should be of Element type. The portal will be rendered inside that element. The default behavior will create a div node and render it at the at the end of document.body.

react-minimalist-portal's Issues

Add possibility to customize the container

Hello,

could you add a node prop to pass the container from the outside please?

Portal issues with React v16

As stated in facebook/react#8386 and also tested with alpha versions, this library is not working with new React Core.

Putting it here as facebook/react#8386 gives a solution :)
Will definitely work on pull request to make this library work with old and new React core.

Error when importing in tests

When library is used in node environment (e.g. in tests) you get the following error:

ReferenceError: Element is not defined
    at Object.<anonymous> (....../node_modules/react-minimalist-portal/lib/portal.js:89:45)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)

I'm using mocha to run tests so I can quick fix it with mocking global.Element = null; but not sure it is the best approach.