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
;
Basic Usage (HOC: withWinSize)
;; { return <div> <b> Width: </b> thispropswinWidth <b> Height: </b> thispropswinHeight </div> ; }TestComponent;
Basic Usage (Hook: useWinSize)
;; const TestComponent = { const width height = ; return <div> <b> Width:</b> width <b> Height:</b> height </div> ;}; ;
HOC Parameterized Usages
YourComponent delay: 500 ; YourComponent delay: 500 updateMode: "debounce"; YourComponent widthOffset: -150 heightOffset: -200;
Hook Parameterized Usages
const width height = ; const width height = ; const width height = ;
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 |