@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
34 lines (33 loc) • 1.32 kB
JavaScript
"use client";
import { useIsomorphicEffect } from "../use-isomorphic-effect/use-isomorphic-effect.mjs";
import { useState } from "react";
//#region packages/@mantine/hooks/src/use-orientation/use-orientation.ts
function getInitialValue(initialValue, getInitialValueInEffect) {
if (getInitialValueInEffect) return initialValue;
if (typeof window !== "undefined" && "screen" in window) return {
angle: window.screen.orientation?.angle ?? initialValue.angle,
type: window.screen.orientation?.type ?? initialValue.type
};
return initialValue;
}
function useOrientation({ defaultAngle = 0, defaultType = "landscape-primary", getInitialValueInEffect = true } = {}) {
const [orientation, setOrientation] = useState(getInitialValue({
angle: defaultAngle,
type: defaultType
}, getInitialValueInEffect));
const handleOrientationChange = (event) => {
const target = event.currentTarget;
setOrientation({
angle: target?.angle || 0,
type: target?.type || "landscape-primary"
});
};
useIsomorphicEffect(() => {
window.screen.orientation?.addEventListener("change", handleOrientationChange);
return () => window.screen.orientation?.removeEventListener("change", handleOrientationChange);
}, []);
return orientation;
}
//#endregion
export { useOrientation };
//# sourceMappingURL=use-orientation.mjs.map