react-win-size

Browser window size injector.

Usage no npm install needed!

<script type="module">
  import reactWinSize from 'https://cdn.skypack.dev/react-win-size';
</script>

README

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