Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-window-decorators

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-window-decorators

Two decorators (higher order components) that inject 'window' scroll position, dimensions, orientation and breakpoint to your component's props.

  • 1.0.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
254
decreased by-15.89%
Maintainers
1
Weekly downloads
 
Created
Source

React Window Decorators

npm version npm downloads

Two decorators (higher order components) that inject window scroll position, dimensions, orientation, breakpoint* and isTouchDevice to your component's props.

If you are not sure what it does, play with the demo.

All modern browsers and IE10+.

* You need to pass breakpoint data (check below).

Changelog

Usage

Library is made as ES module, and you should use it with a module bundler (tested with webpack).

withScroll decorator

Using decorator syntax (my preferred way).

import { withScroll } from 'react-window-decorators';

@withScroll
export default class YourComponent extends Component {
  render() {
    return (
      <div>
        Vertical scroll position is: { this.props.scrollPositionY }
      </div>
    );
  }
}

Or without decorator syntax

import { withScroll } from 'react-window-decorators';

class YourComponent extends Component {
  render() {
    return (
      <div>
        Vertical scroll position is: { this.props.scrollPositionY }
      </div>
    );
  }
}

export default withScroll(YourComponent);

If you run it on the server, withScroll will return 0 as the initial value.

withWindow decorator

withWindow internally uses WindowManager for tracking resize events. If you want to use breakpoints feature you need to set it by creating new WindowManager and passing it array with breakpoints data. Each breakpoint object must contain a name and media query which will be passed to matchMedia.

Second argument is debounceTime which determines resize event's debounce time. Default is 250.

WindowManager is a singleton, so this should be done only once before using decorator.

import { WindowManager } from 'react-window-decorators';

// Example breakpoints data
const BREAKPOINTS = [
  {
    name: 'small',
    media: '(min-width: 0)',
  },
  {
    name: 'medium',
    media: '(min-width: 600px)',
  },
];

// Set breakpoints data
// Somewhere in your application bootstrap
new WindowManager(BREAKPOINTS);

If you don't pass breakpoints data, breakpoint prop will always be null.

Using decorator syntax (my preferred way).

import { withWindow } from 'react-window-decorators';

@withWindow
export default class YourComponent extends Component {
  render() {
    return (
      <div>
        <div>Window dimensions are: { this.props.dimensions.width }/{ this.props.dimensions.height }</div>
        <div>Window orientation is: { this.props.orientation }</div>
        <div>Window breakpoint is: { this.props.breakpoint }</div>
        <div>Device is touch enabled: { this.props.isTouchDevice.toString() }</div>
      </div>
    );
  }
}

Or without decorator syntax

import { withWindow } from 'react-window-decorators';

class YourComponent extends Component {
  render() {
    return (
      <div>
        <div>Window dimensions are: { this.props.dimensions.width }/{ this.props.dimensions.height }</div>
        <div>Window orientation is: { this.props.orientation }</div>
        <div>Window breakpoint is: { this.props.breakpoint }</div>
        <div>Device is touch enabled: { this.props.isTouchDevice.toString() }</div>
      </div>
    );
  }
}

export default withWindow(YourComponent);

If you run it on the server, withWindow will return these initial values

{
  dimensions: {
    width: 0,
    height: 0,
  },
  breakpoint: null,
  orientation: null,
  isTouchDevice: false,
};

Chaining Decorators

@withWindow
@withScroll
export default class YourComponent extends Component {
  ...
}

or

class YourComponent extends Component {
  ...
}

export default withWindow(withScroll(Demo));

License

Released under MIT License.

Keywords

FAQs

Package last updated on 05 Oct 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc