@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);
v0.0.196
:trophy: Contributors
:rocket: Enhancements
- [brush] Add initialBrushPosition #618, fix in #667
💥 Breaking Changes
- [tooltip] Add ability to remove tooltip default styles #666. If styles were applied previously, you will also need to spread
defaultStyles
:
// before
import { Tooltip } from '@vx/tooltip';
...
<Tooltip style={{ color: myCustomColor }} />
// after
import { Tooltip, defaultStyles } from '@vx/tooltip';
...
<Tooltip style={{ ...defaultStyles, color: myCustomColor }} />
:memo: Documentation
- [demo] Several demos refactored to link out to codesandbox
Changes:
- @vx/annotation: 0.0.195 => 0.0.196
- @vx/axis: 0.0.195 => 0.0.196
- @vx/bounds: 0.0.195 => 0.0.196
- @vx/brush: 0.0.195 => 0.0.196
- @vx/chord: 0.0.195 => 0.0.196
- @vx/clip-path: 0.0.195 => 0.0.196
- @vx/curve: 0.0.195 => 0.0.196
- @vx/demo: 0.0.195 => 0.0.196
- @vx/drag: 0.0.195 => 0.0.196
- @vx/event: 0.0.195 => 0.0.196
- @vx/geo: 0.0.195 => 0.0.196
- @vx/glyph: 0.0.195 => 0.0.196
- @vx/gradient: 0.0.195 => 0.0.196
- @vx/grid: 0.0.195 => 0.0.196
- @vx/group: 0.0.195 => 0.0.196
- @vx/heatmap: 0.0.195 => 0.0.196
- @vx/hierarchy: 0.0.195 => 0.0.196
- @vx/legend: 0.0.195 => 0.0.196
- @vx/marker: 0.0.195 => 0.0.196
- @vx/mock-data: 0.0.195 => 0.0.196
- @vx/network: 0.0.195 => 0.0.196
- @vx/pattern: 0.0.195 => 0.0.196
- @vx/point: 0.0.195 => 0.0.196
- @vx/responsive: 0.0.195 => 0.0.196
- @vx/scale: 0.0.195 => 0.0.196
- @vx/shape: 0.0.195 => 0.0.196
- @vx/stats: 0.0.195 => 0.0.196
- @vx/text: 0.0.195 => 0.0.196
- @vx/threshold: 0.0.195 => 0.0.196
- @vx/tooltip: 0.0.195 => 0.0.196
- @vx/voronoi: 0.0.195 => 0.0.196
- @vx/vx: 0.0.195 => 0.0.196
- @vx/zoom: 0.0.195 => 0.0.196