This high order component provides the viewport size to the child in an efficient ways.

It has two primary modes: exact size, and breakpoints.

Exact size

This is the simplest mode, but will often give you more precision and extra renders than desired.

import withViewport from 'react-with-viewport';

export default withViewport()(props => {
  return <div>Width: {props.width}, Height: {props.height}</div>
});

You can pass a throttle timeout: withViewport({ throttle: 500 }).

If your component takes props named 'width', 'height', or 'breakPoint', you can rename the props passed by withViewport: withViewport({ props: ['viewWidth', 'viewHeight', 'bp' ] }).

Props passed:

prop	description
width	the viewport width
height	the viewport height

Breakpoints

With breakpoints, your component receives new props when the viewport passes a threshold.

withViewport({
  breakpoints: {
    mobile: { width: 480 },
    tablet: { width: 720 },
    desktop: { width: 1200 },
    large: { width: 1620 },
  }
})

Props passed:

prop	description
width	the viewport width
height	the viewport height
breakPoint.key	the key of the breakPoints object that matched
breakPoint.width	the width specified in the breakPoint object
breakPoint.isLt	function that checks if the breakPoint is smaller than the specified key
breakPoint.isLte	see above
breakPoint.isGt	see above
breakPoint.isGte	see above

These are the upper bounds, so if the width is 200, then it'll be the 'mobile' breakpoint. If it's larger than the highest breakpoint, it'll be that breakpoint.

Relative operators

The breakPoint prop has methods on it for determining if e.g. the current breakPoint is less-than-or-equal-to 'mobile'.

this.props.breakPoint.isLte('tablet') // returns true or false

The available methods are isLt, isLte, isGt, isGte.

To check for exact equality use: this.props.breakPoint.key === 'mobile'.

Contributing

If you're making significant changes, please create an issue first.

Clone the repo and run yarn or npm install.

To run tests: npm test or npm test -- --watch. Please keep coverage at 100%.