useOrientation
Returns the current screen orientation and lock controls.
Usage
import { useOrientation } from "@siberiacancode/reactuse";
const orientation = useOrientation();callback:
const orientation = useOrientation((value) => {
console.log(value.orientationType);
});Example
import { useOrientation } from "@siberiacancode/reactuse";
export const ScreenOrientation = () => {
const orientation = useOrientation();
if (!orientation.supported) return <div>Not supported</div>;
return (
<div>
{orientation.value.orientationType}
<button onClick={() => orientation.lock("portrait")}>Lock</button>
<button onClick={() => orientation.unlock()}>Unlock</button>
</div>
);
};Notes
- Hook uses the screen.orientation API.
Type Declarations
export interface UseOrientationValue {
angle: number;
orientationType?: OrientationType;
}
export type OrientationLockType =
| "any"
| "landscape-primary"
| "landscape-secondary"
| "landscape"
| "natural"
| "portrait-primary"
| "portrait-secondary"
| "portrait";
export interface useOrientationReturn {
supported: boolean;
value: UseOrientationValue;
lock: (orientation: OrientationLockType) => void;
unlock: () => void;
}
export declare const useOrientation: (
callback?: (value: UseOrientationValue) => void
) => useOrientationReturn;