@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.161

:boom: Breaking Changes

• [scale] Removed color scales, recommend users to use d3-scale-chromatic, following d3's lead in release 5.0.0. #270
• [scale] The following files/tests/documentation are no longer part of @vx/scale: schemeCategory10, schemeCategory20, schemeCategory20b, schemeCategory20c. #270

:rocket: Enhancements

• [tooltip] adds an optional containerProps as a second HOC "config" argument of withTooltip(BaseComponent [, containerProps]). This exposes a hook to enable users to customize any props on the container element. #272
• [tooltip] sets width and height to inherit by default on the container. I'm kind of on the edge with this and am open to removing it because it may be an edge case, but my reasoning is as follows: if a user is combining withTooltip and a responsive component like ParentSize like this example, they'll have to update the withTooltip container div to also have full width/height so this would be a "smart default". #272

:memo: Documentation

• [scale] Added a section on color scales, which goes over how one would use d3-scale-chromatic with vx/scale. #270
• [tooltip] Adds a readme for @vx/tooltip components + enhancer. #272
• [demo] add <AxisRight /> to /axis demo tile. #280
• [demo] update vx-demo.now.sh doc pages. #281

:house: Internal

• Add configuration for Prettier and format the existing codebase. #275
• Add pre-commit hook to format changed files before commits. #275
• [docs] fix npm run docs script. #281

:trophy: Contributors

• sto3psl
• williaster
• trainorpj
• hshoff

Changes:
 - @vx/annotation: 0.0.160 => 0.0.161
 - @vx/axis: 0.0.160 => 0.0.161
 - @vx/bounds: 0.0.153 => 0.0.161
 - @vx/boxplot: 0.0.153 => 0.0.161
 - @vx/brush: 0.0.153 => 0.0.161
 - @vx/clip-path: 0.0.153 => 0.0.161
 - @vx/curve: 0.0.153 => 0.0.161
 - @vx/demo: 0.0.160 => 0.0.161
 - @vx/drag: 0.0.157 => 0.0.161
 - @vx/event: 0.0.153 => 0.0.161
 - @vx/geo: 0.0.153 => 0.0.161
 - @vx/glyph: 0.0.153 => 0.0.161
 - @vx/gradient: 0.0.153 => 0.0.161
 - @vx/grid: 0.0.160 => 0.0.161
 - @vx/group: 0.0.153 => 0.0.161
 - @vx/heatmap: 0.0.153 => 0.0.161
 - @vx/hierarchy: 0.0.153 => 0.0.161
 - @vx/legend: 0.0.154 => 0.0.161
 - @vx/marker: 0.0.160 => 0.0.161
 - @vx/mock-data: 0.0.153 => 0.0.161
 - @vx/network: 0.0.153 => 0.0.161
 - @vx/pattern: 0.0.153 => 0.0.161
 - @vx/point: 0.0.153 => 0.0.161
 - @vx/responsive: 0.0.158 => 0.0.161
 - @vx/scale: 0.0.153 => 0.0.161
 - @vx/shape: 0.0.160 => 0.0.161
 - @vx/stats: 0.0.153 => 0.0.161
 - @vx/text: 0.0.159 => 0.0.161
 - @vx/tooltip: 0.0.160 => 0.0.161
 - @vx/voronoi: 0.0.153 => 0.0.161
 - @vx/vx: 0.0.160 => 0.0.161
 - @vx/zoom: 0.0.153 => 0.0.161