@rexlabs-spicerhaart/portal v2.0.4

Portal - Vivid Component

Basic implementation of portalling in react using a bespoke version of react-portals.

Create a PortalTarget with a name, put that in the DOM tree where you would like your content portalled, then using the component send arbitrary components into that PortalTarget.

Supports children as a function to add wrappers around your portalled content (for animation groups etc.)

Note - React Dependency

This package has been updated to React 16, using the new context API. This means, if your app stiull runs on React 15.x, you either need to polyfill the context API or use the last supported version of @rexlabs/portal (v1.1.1).

Usage

import { PortalProvider, PortalTarget, Portal } from '@rexlabs/portal';

# index.js
class AppShell extends PureComponent {
  render () {
    return (
      <PortalProvider>
        <App />
      </PortalProvider>
    )
  }
}

# app.js
class App extends PureComponent {
  render () {
    return (
      <div>
        <PortalTarget name='modals'>
         {({ children }) => (
           <CSSAnimationGroup children={children} {...animationGroupProps} />
        )}
        </PortalTarget>
        <PortalTarget name='toasts' />
      </div>
    )
  }
}

# modal.js
class Modal extends PureComponent {
  render () {
    return (
      <Portal target='modals'>
        {/* Modal content here */}
      </Portal>
    )
  }
}

Development

Install dependencies

$ yarn

Available Commands

$ yarn start              # starts storybook, for visually testing portal
$ yarn test               # runs all units tests
$ yarn test:watch         # runs unit tests when files change
$ yarn build              # bundles the package for production

Legal

Copyright © 2018 Rex Software All Rights Reserved.