React-Portal-Minimal

Demo

React-Portal-Minimal is a minimalistic version of React-Portal.

Compared to React-Portal, it is less than 1/3 the size, has minimal options, and no state.

It is intended as a building block. It does only three things:

1. Hoists its contents to a new React subtree.
2. Optionally sets a className on the subtree root.
3. Updates that className on the subtree root if it changes.

Features

• Transports its child into a new React component and appends it to the document.body (creates a new independent React tree)
• Doesn't leave any mess in DOM after unmount.
• no dependencies
• fully covered by tests

Installation

npm install react react-dom react-portal-minimal --save

Size

| | react-portal | react-portal-minimal | |----------------|--------------|----------------------| | require() size | 7.3kB | 3.7kB | | tarball size | 450kB | 4.2kB |

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Portal from 'react-portal-minimal';

export default class App extends React.Component {

  render() {
    const button1 = <button>Open portal with pseudo modal</button>;

    return (
      <Portal>
        <PseudoModal>
          <h2>Pseudo Modal</h2>
          <p>This react component is appended to the document body.</p>
        </PseudoModal>
      </Portal>
    );
  }

}

export class PseudoModal extends React.Component {

  render() {
    return (
      <div>
        {this.props.children}
        <p><button onClick={this.props.closePortal}>Close this</button></p>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.getElementById('react-body'));

Documentation - props

Required

children : ReactElement

The portal expects one child (<Portal><Child ... /></Portal>) that will be ported.

Optional

className: string

A className to apply to the new React tree's root.

Contribution

Please, create issues and pull requests.

git clone https://github.com/strml/react-portal-minimal
cd react-portal-minimal
npm install
npm start
open http://localhost:3000

Don't forget to run this before every commit:

npm test

Credits

This project is based on @tajo's react-portal.

That project: Vojtech Miksu 2015, miksu.cz, @vmiksu