Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vx-bounds] add package with 'withBoundingRects()' HOC and tests #91

Merged
merged 1 commit into from
Jul 7, 2017

Conversation

williaster
Copy link
Collaborator

This PR adds the @vx/bounds package which contains a withBoundingRects() higher-order component that is meant to help with detecting whether a given component is overflowing its parent container. This HOC passes the following props to the component which it wraps:

const rectShape = PropTypes.shape({
  top: PropTypes.number.isRequired,
  right: PropTypes.number.isRequired,
  bottom: PropTypes.number.isRequired,
  left: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
});

export const withBoundingRectsProps = {
  getRects: PropTypes.func,
  rect: rectShape,
  parentRect: rectShape,
};

Tests
Tested with jest and with @vx/tooltip in a separate repository:

Naive tooltip (beforewithBoundingRects())
naive-tooltip

Smarter tooltip (after withBoundingRects())
smart-tooltip

@hshoff
Copy link
Member

hshoff commented Jul 7, 2017

👏 fantastic work @williaster!

@hshoff hshoff merged commit 2cf9ade into airbnb:master Jul 7, 2017
@hshoff hshoff modified the milestones: v0.0.128, v0.0.129 Jul 7, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants