Nobody Prefers Margarine

    orientation-observer

    1.0.0 • Public • Published

    orientation-observer

    Allows you to render components selectively based on aspect ratio.

    How so?

    It listens for window resize events and compares window.innerWidth and window.innerHeight. If height is greater, only components with orientation='portrait' will be rendered. If width is greater, components with orientation='landscape' will be rendered. This is inspired by https://github.com/zeroseven/react-screen-orientation, but instead of using @media queries for detecting orientation we'll just use window size.

    Quick-start

    npm install orientation-observer
    
    import React, { Component } from 'react'
     
    import { AspectRatioObserver, Orientation } from 'orientation-observer'
     
    class App extends Component {
      render () {
        return (
          <AspectRatioObserver>
            {/* Will only be rendered in landscape */}
            <Orientation orientation='landscape'>
              <div>
                <p>Only visible in landscape</p>
              </div>
            </Orientation>
            {/* Will only be rendered in portrait */}
            <Orientation orientation='portrait'>
              <div>
                <p>Please rotate your device</p>
              </div>
            </Orientation>
          </AspectRatioObserver>
        );
      }
    }

    Keywords

    Install

    npm i orientation-observer

    DownloadsWeekly Downloads

    11

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    8.61 kB

    Total Files

    4

    Last publish

    Collaborators

    • charliehess