How to use the @vx/bounds.withBoundingRects function in @vx/bounds

To help you get started, we’ve selected a few @vx/bounds examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github hshoff / vx / packages / vx-tooltip / src / tooltips / TooltipWithBounds.jsx View on Github external
top = Math.round(top);

  return (
    
      {children}
    
  );
}

TooltipWithBounds.propTypes = propTypes;
TooltipWithBounds.defaultProps = defaultProps;

export default withBoundingRects(TooltipWithBounds);
github williaster / data-ui / packages / event-flow / src / components / Tooltip.jsx View on Github external
if (rect && parentRect) {
    left = detectOverflowX && rect.right > parentRect.right ? left - rect.width : left;
    top = detectOverflowY && rect.bottom > parentRect.bottom ? top - rect.height : top;
  }

  return (
    <div width="" style="{{">
      {children}
    </div>
  );
}

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

export default withBoundingRects(Tooltip);
github zooniverse / front-end-monorepo / packages / lib-classifier / src / components / Classifier / components / SubjectViewer / components / SVGComponents / VXTooltip / VXTooltip.js View on Github external
}
  }
}

VXTooltip.propTypes = {
  ...withBoundingRectsProps,
  backgroundColor: PropTypes.string,
  label: PropTypes.string.isRequired,
  left: PropTypes.number.isRequired,
  pointDirection: PropTypes.oneOf(['down', 'left', 'right', 'up']),
  pointPosition: PropTypes.oneOf(['start', 'center', 'end']),
  theme: PropTypes.object,
  top: PropTypes.number.isRequired
}

export default withTheme(withBoundingRects(VXTooltip))
export { VXTooltip }

@vx/bounds

Utilities to make your life with bounding boxes better

MIT
Latest version published 4 years ago

Package Health Score

78 / 100
Full package analysis

Popular @vx/bounds functions