Utilities to make your life with bounding boxes better

Usage no npm install needed!

<script type="module">
  import vxBounds from 'https://cdn.skypack.dev/@vx/bounds';



npm install --save @vx/bounds

withBoundingRects HOC

It's often useful to determine whether elements (e.g., tooltips) overflow the bounds of their parent container and adjust positioning accordingly. The withBoundingRects higher-order component is meant to simplify this computation by passing in a component's bounding rect as well as its parent's bounding rect.

Example usage

Example usage with a <Tooltip /> component

import React from 'react';
import PropTypes from 'prop-types';
import { withBoundingRects, withBoundingRectsProps } from '@vx/bounds';

const propTypes = {
  left: PropTypes.number.isRequired,
  top: PropTypes.number.isRequired,
  children: PropTypes.node,

const defaultProps = {
  children: null,

function Tooltip({
  left: initialLeft,
  top: initialTop,
}) {
  let left = initialLeft;
  let top = initialTop;

  if (rect && parentRect) {
    left = rect.right > parentRect.right ? (left - rect.width) : left;
    top = rect.bottom > parentRect.bottom ? (top - rect.height) : top;

  return (
    <div style={{ top, left, ...myTheme }}>

Tooltip.propTypes = propTypes;
Tooltip.defaultProps = defaultProps;

export default withBoundingRects(Tooltip);