Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brigand/react-with-viewport
This high order component provides the viewport size to the child in an efficient ways.
https://github.com/brigand/react-with-viewport
media-queries react
Last synced: 2 months ago
JSON representation
This high order component provides the viewport size to the child in an efficient ways.
- Host: GitHub
- URL: https://github.com/brigand/react-with-viewport
- Owner: brigand
- Created: 2017-08-11T14:48:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-13T21:53:04.000Z (over 7 years ago)
- Last Synced: 2024-10-29T02:48:30.252Z (3 months ago)
- Topics: media-queries, react
- Language: JavaScript
- Homepage:
- Size: 50.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/brigand/react-with-viewport)
[](https://coveralls.io/github/brigand/react-with-viewport?branch=master)
[](https://www.npmjs.com/package/react-with-viewport)
[](https://david-dm.org/brigand/react-with-viewport)
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.
```jsx
import withViewport from 'react-with-viewport';
export default withViewport()(props => {
return
Width: {props.width}, Height: {props.height}
});
```
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.
```jsx
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'.
```js
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%.