react-handheld-portal-device
v1.0.0
Published
Makes positioning portaled tooltips/dropdowns/etc a piece of cake π!
Downloads
1,422
Readme
React Handheld Portal Device π
Makes positioning portaled tooltips/dropdowns/etc a piece of cake π°!
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,
};
...
}