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

    2

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    16.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • nskeskin