https://github.com/charliehess/orientation-observer

Render React components based on window aspect ratio
https://github.com/charliehess/orientation-observer

Last synced: 7 days ago
JSON representation

Render React components based on window aspect ratio

• Host: GitHub
• URL: https://github.com/charliehess/orientation-observer
• Owner: CharlieHess
• License: mit
• Created: 2018-03-10T22:19:30.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-03-10T23:02:07.000Z (over 6 years ago)
• Last Synced: 2023-11-23T02:41:05.896Z (12 months ago)
• Language: JavaScript
• Size: 24.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```

```javascript

import React, { Component } from 'react'

import { OrientationObserver, Orientation } from 'orientation-observer'

class App extends Component {

  render () {

    return (

      

        {/* Will only be rendered in landscape */}

        

          


            
Only visible in landscape

          

        

        {/* Will only be rendered in portrait */}

        

          


            
Please rotate your device

          

        

      

    );

  }

}

```