@vx/bounds

@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 = {
  ...withBoundingRectsProps,
  left: PropTypes.number.isRequired,
  top: PropTypes.number.isRequired,
  children: PropTypes.node,
};

const defaultProps = {
  children: null,
};

function Tooltip({
  left: initialLeft,
  top: initialTop,
  rect,
  parentRect,
  children,
}) {
  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 }}>
      {children}
    </div>
  );
}

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

export default withBoundingRects(Tooltip);

Changelog

v0.0.195

:trophy: Contributors

• ptmx PR #631

:rocket: Enhancements

• [tooltip] useTooltip hook added

:boom: Breaking Changes

• [tooltip] internally introduces useState, requires bumping the peerDep for react to ^16.8.0-0

:memo: Documentation

• [tooltip] add useState to readme, add advice on HOC vs hooks
• [demo] Rewrite the BarStack demo to use useTooltip instead of withTooltip

Changes:
 - @vx/annotation: 0.0.194 => 0.0.195
 - @vx/axis: 0.0.194 => 0.0.195
 - @vx/bounds: 0.0.194 => 0.0.195
 - @vx/brush: 0.0.194 => 0.0.195
 - @vx/chord: 0.0.194 => 0.0.195
 - @vx/clip-path: 0.0.194 => 0.0.195
 - @vx/curve: 0.0.194 => 0.0.195
 - @vx/demo: 0.0.194 => 0.0.195
 - @vx/drag: 0.0.194 => 0.0.195
 - @vx/event: 0.0.194 => 0.0.195
 - @vx/geo: 0.0.194 => 0.0.195
 - @vx/glyph: 0.0.194 => 0.0.195
 - @vx/gradient: 0.0.194 => 0.0.195
 - @vx/grid: 0.0.194 => 0.0.195
 - @vx/group: 0.0.194 => 0.0.195
 - @vx/heatmap: 0.0.194 => 0.0.195
 - @vx/hierarchy: 0.0.194 => 0.0.195
 - @vx/legend: 0.0.194 => 0.0.195
 - @vx/marker: 0.0.194 => 0.0.195
 - @vx/mock-data: 0.0.194 => 0.0.195
 - @vx/network: 0.0.194 => 0.0.195
 - @vx/pattern: 0.0.194 => 0.0.195
 - @vx/point: 0.0.194 => 0.0.195
 - @vx/responsive: 0.0.194 => 0.0.195
 - @vx/scale: 0.0.194 => 0.0.195
 - @vx/shape: 0.0.194 => 0.0.195
 - @vx/stats: 0.0.194 => 0.0.195
 - @vx/text: 0.0.194 => 0.0.195
 - @vx/threshold: 0.0.194 => 0.0.195
 - @vx/tooltip: 0.0.194 => 0.0.195
 - @vx/voronoi: 0.0.194 => 0.0.195
 - @vx/vx: 0.0.194 => 0.0.195
 - @vx/zoom: 0.0.194 => 0.0.195