v1.0.6Published 9 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

reactive-window Build Status

Reactive helpers to work with screen size, etc.

Copyright (c) 2014-2016 Gadi Cohen, released under the MIT license (see LICENSE.txt).


To use: meteor add gadicohen:reactive-window in your project folder.

In JavaScript:

  • rwindow.innerWidth() and rwindow.outerWidth() - window width

  • rwindow.innerHeight() and rwindow.outerHeight() - window height

  • rwindow.$width() = $(window).width() - browser agnostic in some cases

  • rwindow.$height() = $(window).height() - browser agnostic in some cases

  • rwindow.screen() - like bootstrap3: xsmall, small, medium, large

(more info)

All the above functions take an optional operator, and value, e.g:

  • rwindow.innerWidth('gt', 120) - returns true if width greater than 120
  • rwindow.screen('lte', 'small') - true for xsmall, small screen sizes

If you're a stickler per performance, use rwindow.get('screen') etc if you know you won't be performing an op. rwindow._dict.get('screen') works too :)

In Templates:

All the above available as helpers, with the same parameters, e.g.:

Current jQuery(window).width() is {{rwindow.$width}}


{{#if rwindow.screen 'lte' 'medium'}}
  {{> xsmallSmallMediumLayout}}
  {{> largeLayout}}

Operator reference

  • lt - less than ("<")
  • lte - less than or equal to ("<=")
  • eq - equal to ("==")
  • gt - greater than (">")
  • gte - greater than or equal to (">=")