https://github.com/bence-toth/react-hook-device-orientation
A React hook for detecting device orientation
https://github.com/bence-toth/react-hook-device-orientation
device-orientation react react-hooks
Last synced: about 1 month ago
JSON representation
A React hook for detecting device orientation
- Host: GitHub
- URL: https://github.com/bence-toth/react-hook-device-orientation
- Owner: bence-toth
- License: lgpl-3.0
- Created: 2019-02-19T22:28:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:09:56.000Z (over 3 years ago)
- Last Synced: 2025-06-06T09:08:14.722Z (about 1 year ago)
- Topics: device-orientation, react, react-hooks
- Language: JavaScript
- Size: 209 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-hook-device-orientation :dizzy:
A React hook for detecting [device orientation](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation).
## Installation
Using `npm`:
```sh
npm install --save react-hook-device-orientation
```
Using `yarn`:
```sh
yarn add react-hook-device-orientation
```
## Usage
```jsx
import React from 'react'
import useDeviceOrientation from 'react-hook-device-orientation'
const ComponentWithDeviceOrientation = () => {
const deviceOrientation = useDeviceOrientation()
return (
- Alpha: {orientation.alpha}
- Beta: {orientation.beta}
- Gamma: {orientation.gamma}
- Absolute: {orientation.absolute ? 'yes' : 'no'}
)
}
```
## 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](https://caniuse.com/#feat=deviceorientation) 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