react-win-size

Features

• Contains a HOC (Higher Order Component) and a custom hook to inject browser window size into components.
• Includes 'debounce' and 'throttle' options for an optimized usage.
• Includes optional 'offset' params for modified usage.

Usage

$ npm install react-win-size

import { useWinSize, withWinSize } from "react-win-size";

Basic Usage (HOC: withWinSize)

import React, { Component } from "react";
import { withWinSize } from "react-win-size";
 
class TestComponent extends Component {
  render() {
    return (
      <div>
        <b> Width: </b> {this.props.winWidth}
        <b> Height: </b> {this.props.winHeight}
      </div>
    );
  }
}
export default withWinSize(TestComponent);

Basic Usage (Hook: useWinSize)

import React from "react";
import { useWinSize } from "react-win-size";
 
const TestComponent = () => {
  const [width, height] = useWinSize();
 
  return (
    <div>
      <b> Width:</b> {width}
      <b> Height:</b> {height}
    </div>
  );
};
 
export default TestComponent;

HOC Parameterized Usages

export default withWinSize(YourComponent, { delay: 500 });
 
export default withWinSize(YourComponent, {
  delay: 500,
  updateMode: "debounce",
});
 
export default withWinSize(YourComponent, {
  widthOffset: -150,
  heightOffset: -200,
});

Hook Parameterized Usages

const [width, height] = useWinSize({ delay: 500 });
 
const [width, height] = useWinSize({ delay: 500, updateMode: "debounce" });
 
const [width, height] = useWinSize({ widthOffset: -150, heightOffset: -200 });

Parameters

Name	Description	Default
updateMode	Mode of update function. 'throttle' or 'debounce'	'throttle'
delay	Delay of update function. Set 0 to disable optimization.	500
widthOffset	Custom offset value to window width.	0
heightOffset	Custom offset value to window height.	0