Skip to main content

Portal - Vivid Component

Basic implementation of portalling in react.

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: Always default to use React.createPortal before using this component. It should only be used when you can't be sure of where the component is being portalled from, and you always need the portalled elements to be animated at the target (see @rexlabs/dialog for an example of this).

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>
    )
  }
}

Breaking changes​

  • The portal provider is now required as this is where the portal state is managed now, instead of being handled outside of react

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

Copyright © 2019 Rex Software All Rights Reserved.