Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-window-dimensions

1.0.2 • Public • Published

react-window-dimensions

Build Status

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

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);

Advanced Usage

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);

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.

Install

npm i react-window-dimensions

DownloadsWeekly Downloads

1,755

Version

1.0.2

License

MIT

Unpacked Size

15.6 kB

Total Files

11

Last publish

Collaborators

  • avatar