react-use
useAsyncuseBatteryuseFaviconuseGeolocationuseHoveruseLifecyclesuseLocationuseLoggeruseMediauseMountuseRafuseSetstateuseSpeechuseTimeoutuseTitleuseUnmountuseUpdaterehooks
useComponentSizeuseDeviceOrientationuseDocumentTitleuseInputValueuseLocalStorageuseNetworkStatususeOnlineStatususeWindowMousePositionuseWindowSizeuseDeviceOrientation
https://github.com/palmerhq/the-platform/Detect and retrieve current device orientation.
💡 Implementation
Pretty
Copy
const useDeviceOrientation = () => {
const [orientation, setOrientation] = React.useState({
alpha: null,
beta: null,
gamma: null,
absolute: false
});
const handle = e => {
setOrientation({
beta: e.beta,
alpha: e.alpha,
gamma: e.gamma,
absolute: e.absolute
});
};
React.useEffect(() => {
window.addEventListener("deviceorientation", handle);
return () => {
window.removeEventListener("deviceorientation", handle);
};
}, []);
return orientation;
};
🚀 Usage
Pretty
Copy
function Demo() {
const value = useDeviceOrientation();
return (
Absolute: {value.absolute}
Alpha: {value.alpha}
Beta: {value.beta}
Gamma: {value.gamma}
);
}
âš¡Preview
Absolute:
Alpha:
Beta:
Gamma:
🚨 console
Contributors
