@supunlakmal/hooks
Version:
A collection of reusable React hooks
41 lines • 1.48 kB
JavaScript
import { useState } from 'react';
import { useIsomorphicLayoutEffect } from '../side-effects-lifecycle/useIsomorphicLayoutEffect';
const initialState = {
type: null,
angle: 0,
isSupported: false,
};
/**
* Custom hook to track the screen orientation state.
*
* @returns An object containing the current screen orientation type and angle.
*/
export function useScreenOrientation() {
const [state, setState] = useState(initialState);
useIsomorphicLayoutEffect(() => {
if (typeof window !== 'undefined' &&
'screen' in window &&
'orientation' in window.screen) {
setState((prevState) => (Object.assign(Object.assign({}, prevState), { isSupported: true })));
}
else {
setState((prevState) => (Object.assign(Object.assign({}, prevState), { isSupported: false })));
return;
}
const screenOrientation = window.screen.orientation;
const updateOrientation = () => {
setState({
type: screenOrientation.type,
angle: screenOrientation.angle,
isSupported: true,
});
};
updateOrientation(); // Initial read
screenOrientation.addEventListener('change', updateOrientation);
return () => {
screenOrientation.removeEventListener('change', updateOrientation);
};
}, []);
return state;
}
//# sourceMappingURL=useScreenOrientation.js.map