https://github.com/kunokdev/react-window-size-listener
React component for listening window size states
https://github.com/kunokdev/react-window-size-listener
client react viewport viewport-size
Last synced: 11 months ago
JSON representation
React component for listening window size states
- Host: GitHub
- URL: https://github.com/kunokdev/react-window-size-listener
- Owner: kunokdev
- Created: 2017-06-13T21:07:37.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T09:47:56.000Z (over 3 years ago)
- Last Synced: 2025-07-04T03:48:01.228Z (12 months ago)
- Topics: client, react, viewport, viewport-size
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-window-size-listener
- Size: 294 KB
- Stars: 20
- Watchers: 3
- Forks: 5
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-window-size-listener
React component for listening to window resize events.
This is ES6 rewrite of [react-window-resize-listener](https://github.com/cesarandreu/react-window-resize-listener) due to deprecation warnings and many developers commented on this issue without getting any response for a while.
## Installation
```sh
npm install react-window-size-listener --save
```
## API
### ``
React component that takes a single onResize callback which is called every time the window is resized.
#### Props
* `void onResize(windowSize)` - Callback that gets called every time the window is resized. It's always called once soon after getting mounted. Receives a `windowSize` param which is an Object with keys `windowHeight` and `windowWidth`, both values are numbers.
#### Example
As regular component:
```jsx
import WindowSizeListener from 'react-window-size-listener'
import ReactDOM from 'react-dom'
import React from 'react'
ReactDOM.render(
{
console.log('Window height', windowSize.windowHeight)
console.log('Window width', windowSize.windowWidth)
}}/>
,
document.getElementById('app')
)
```
alternatively you can render it with children:
```jsx
console.log(windowSize)}
>
Hello world!
```
or as Higher Order Component (HOC):
```jsx
import React from 'react';
import { withWindowSizeListener } from 'react-window-size-listener';
class App extends React.Component {
render() {
return (
{this.props.windowSize.windowWidth}
{this.props.windowSize.windowHeight}
);
}
}
export default withWindowSizeListener(App);
```
### `WindowSizeListener.DEBOUNCE_TIME`
Numeric value of how much time should be waited before calling each listener function. Default value is `100`.
The debounce function is created lazily when the component instance is mounted, so you can change the value before mounting.
## Details
This component lazily adds the window resize event listener, this means it works with universal apps. The listener only get added when a component instance gets mounted.
To avoid performance problems associated with registering multiple event listeners, it only registers a single listener which is shared among all component instances.
## License
MIT