0.0.199 • Published 4 years ago
@vx/bounds v0.0.199
@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);
0.0.199
4 years ago
0.0.198
4 years ago
0.0.197
4 years ago
0.0.196
4 years ago
0.0.195
4 years ago
0.0.194
4 years ago
0.0.193
4 years ago
0.0.193-alpha.2
4 years ago
0.0.193-alpha.1
4 years ago
0.0.193-alpha.0
4 years ago
0.0.192
5 years ago
0.0.189
5 years ago
0.0.182
5 years ago
0.0.165
6 years ago
0.0.165-beta.1
6 years ago
0.0.165-beta.0
6 years ago
0.0.161
6 years ago
0.0.153
6 years ago
0.0.147
6 years ago
0.0.143
7 years ago
0.0.141
7 years ago
0.0.140
7 years ago
0.0.137
7 years ago
0.0.136
7 years ago
0.0.129
7 years ago
0.0.128
7 years ago