A higher order component that can be used to inject the window dimensions into your component as properties.
npm i -S react-window-dimensions
import React from 'react';
import windowDimensions from 'react-window-dimensions';
const MyComponent = ({ width, height }) => (
<div>
The window is {width} x {height}!
</div>
);
export default windowDimensions()(MyComponent);
import React from 'react';
import windowDimensions from 'react-window-dimensions';
import debounce from 'lodash.debounce';
const MyComponent = ({ windowWidth }) => (
<div>
The window is {windowWidth} pixels wide!
</div>
);
export default windowDimensions({
take: () => ({ windowWidth: window.innerWidth }),
debounce: onResize => debounce(onResize, 100),
})(MyComponent);
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
)
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.