Miss any of our Open RFC calls?Watch the recordings here! »

react-win-size

1.4.0 • Public • Published

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

Install

npm i react-win-size

DownloadsWeekly Downloads

0

Version

1.4.0

License

MIT

Unpacked Size

16.2 kB

Total Files

9

Last publish

Collaborators

  • avatar