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

`js
import React from 'react';
import windowDimensions from 'react-window-dimensions';

const MyComponent = ({ width, height }) => (


);

export default windowDimensions()(MyComponent);
`

Advanced Usage

`js
import React from 'react';
import windowDimensions from 'react-window-dimensions';
import debounce from 'lodash.debounce';

const MyComponent = ({ windowWidth }) => (


);

export default windowDimensions({
take: () => ({ windowWidth: window.innerWidth }),
debounce: onResize => debounce(onResize, 100),
})(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.

[eslint]: http://eslint.org/
[airbnb-base]: https://www.npmjs.com/package/eslint-config-airbnb-base