Install
$ npm install @reacthooks.org/use-orientation-change
useOrientationChange
React (State and Effect) Hook to get your device orientation.
Synopsis
In your React component:
import useOrientationChange from "use-orientation-change";
function OrientationChange() {
const orientation = useOrientationChange()
// 'portrait' or 'landscape'
return <code>orientation = { orientation }</code>
}
There is no need to subscribe or unsubscribe to the window 'orientationchange' event
since this hook does it for you.
Other Hooks
Please see all of the other reacthooks.org hooks:
-
use-document-title - Change the
document.title - use-resize - Subscribe to Window 'resize' events and get the width and height
- use-window-width - Subscribe to Window 'resize' events and get the width
- use-online - Get online/offline status
-
use-match-media - Get whether a media query is matched
-
.usePrefersColorScheme()- Get whether the user prefers the 'light' or 'dark' color scheme
-
-
use-set-timeout - use and automatically clear a
setTimeout() -
use-set-interval - use and automatically clear a
setInterval() - use-orientation-change - get Device Orientation updates
- use-session-storage - gets and sets a key in window.sessionStorage
- use-local-storage - gets and sets a key in window.localStorage
- use-form-validation - helps manage form values, validation, and errors
- use-watch-position - get the user's location using the Geolocation API
Author
$ npx chilts
╒════════════════════════════════════════════════════╕
│ │
│ Andrew Chilton (Personal) │
│ ------------------------- │
│ │
│ Email : andychilton@gmail.com │
│ Web : https://chilts.org │
│ Twitter : https://twitter.com/andychilton │
│ GitHub : https://github.com/chilts │
│ GitLab : https://gitlab.org/chilts │
│ │
│ Apps Attic Ltd (My Company) │
│ --------------------------- │
│ │
│ Email : chilts@appsattic.com │
│ Web : https://appsattic.com │
│ Twitter : https://twitter.com/AppsAttic │
│ GitLab : https://gitlab.com/appsattic │
│ │
│ Node.js / npm │
│ ------------- │
│ │
│ Profile : https://www.npmjs.com/~chilts │
│ Card : $ npx chilts │
│ │
╘════════════════════════════════════════════════════╛
(Ends)