Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-window-dimensions with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactWindowDimensions = require("react-window-dimensions")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-window-dimensions v1.0.2

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free