iamjoshellis / react-handheld-portal-device

Perfectly positioned portals... 🌀

React Handheld Portal Device 🌀

Makes positioning portaled tooltips/dropdowns/etc a piece of cake 🍰!

CodeSandbox Demo 🎁

Storybook Demo 📘

Usage

import React from 'react';
import Portal from 'react-handheld-portal-device';

const Component = () => (
  <Parent>
    <Portal>
      (parentRect => <Content style={{ position: 'fixed', top: parentRect.top, left: parentRect.left,  }} />)
    </Portal>
  </Parent>
);

Using the render props pattern the Content can be "aware" of Parent's parentRect, which is the result of calling getBoundingClientRect on the Parent DOM node.

Props

class Portal extends React.Component {
  static propTypes = {
    debounce: PropTypes.number, // set the debounce time for event listeners
  };

  static defaultProps = {
    debounce: 16,
  };

  ...
}