react-window-dimensions
A higher order component that can be used to inject the window dimensions into your component as properties.
Installation
npm i -S react-window-dimensions
Basic Usage
;; const MyComponent = <div> The window is width x height! </div>; MyComponent;
Advanced Usage
;;; const MyComponent = <div> The window is windowWidth pixels wide! </div>; windowWidth: windowinnerWidth MyComponent;
Options
There are several options you can use to alter the higher order component:
- take - a function that maps the window to props that are passed into the wrapped component (default:
(props) => ({ width: window.innerWidth, height: window.innerHeight })
) - debounce - a function that debounces the
resize
event handler (default:fn => fn
)
Contributing
Pull requests are welcome. Code style is inherited from airbnb-base and enforced by eslint.
You can check that your changes respect the code style by running the lint
command:
npm run lint
If you're submitting a bugfix, a test to document (and prevent) the issue is welcome.