react-hook-device-orientation

React hook for accessing device orientation

Usage no npm install needed!

<script type="module">
  import reactHookDeviceOrientation from 'https://cdn.skypack.dev/react-hook-device-orientation';
</script>

README

react-hook-device-orientation :dizzy:

A React hook for detecting device orientation.

Installation

Using npm:

npm install --save react-hook-device-orientation

Using yarn:

yarn add react-hook-device-orientation

Usage

import React from 'react'
import useDeviceOrientation from 'react-hook-device-orientation'

const ComponentWithDeviceOrientation = () => {
  const deviceOrientation = useDeviceOrientation()

  return (
    <ul>
      <li>Alpha:    {orientation.alpha}</li>
      <li>Beta:     {orientation.beta}</li>
      <li>Gamma:    {orientation.gamma}</li>
      <li>Absolute: {orientation.absolute ? 'yes' : 'no'}</li>
    </ul>
  )
}

Caveats

There are slightly different implementations of the web API responsible for accessing device orientation, and therefore the values you get from this hook might not be consistent across different browsers. Read more about this.

Contributions

Contributions are welcome. File bug reports, create pull requests, feel free to reach out at tothab@gmail.com.

Licence

LGPL-3.0