@visx/bounds
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published

    @visx/bounds

    npm install --save @visx/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 '@visx/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);

    Install

    npm i @visx/bounds

    DownloadsWeekly Downloads

    64,481

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    13.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • vx-hshoff
    • hshoff
    • christopher.card.williams
    • lencioni