Nostradamus Prophecy Machine

    react-portal-minimal

    4.0.2 • Public • Published

    React-Portal-Minimal

    npm version npm downloads Build Status

    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

    Install

    npm i react-portal-minimal

    DownloadsWeekly Downloads

    102

    Version

    4.0.2

    License

    MIT

    Last publish

    Collaborators

    • strml