bence-toth / react-hook-screen-orientation

A React hook for detecting screen orientation

react-hook-screen-orientation 🔃

A React hook for detecting screen orientation.

Installation

Using npm:

npm install --save react-hook-screen-orientation

Using yarn:

yarn add react-hook-screen-orientation

Usage

import React from 'react'
import useScreenOrientation from 'react-hook-screen-orientation'

const ComponentWithScreenOrientation = () => {
  const screenOrientation = useScreenOrientation()

  return (
    <p>Screen orientation is: {screenOrientation}</p>
  )
}

Notes

The screenOrientation value provided by the hook is the type propery of a ScreenOrientation interface is always one of the following strings:

• portrait-primary
• portrait-secondary (meaning upside down)
• landscape-primary
• landscape-secondary (meaning upside down)

Contributions

Contributions are welcome. File bug reports, create pull requests, feel free to reach out at [email protected].

Licence

LGPL-3.0

react-hook-screen-orientation's Issues

Relicense under MIT

Rename master branch to main

orientationchange event is deprecated

https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event

I humbly suggest the following change to useEffect:

useEffect(() => {
    // window.addEventListener(
    //   'orientationchange',
    //   updateOrientation
    // )
    window.screen.orientation.onchange = updateOrientation
    // return () => {
    //   window.removeEventListener(
    //     'orientationchange',
    //     updateOrientation
    //   )
    // }
  }, [])

Add boilerplate from Create React Thing

Update dependencies

Add React to peer dependencies and update dependencies

Add tests

Add ambient types for TypeScript

Doesn't work on iPad/iPhone

undefined is not an object (evaluating 'window.screen.orientation.type')

Similar to:

akamai/boomerang#214

Upgrade peerDependencies to allow React 18.x

Upgrade peerDependencies to allow React 17+

Untrack and remove package lock file

Operability improvements

• Update dev dependencies
• Add ESLint (+rule sets) and prettier to dev dependencies
• Add npm scripts to run prettier and eslint
• Create GH Actions workflow to run build, linter, and prettier