From 035db481654d03b1e411b3c663998514598910ea Mon Sep 17 00:00:00 2001 From: cupcakearmy Date: Wed, 6 Mar 2019 22:47:29 +0100 Subject: [PATCH] custom hook for device orientation --- src/util.ts | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/util.ts b/src/util.ts index adddae9..af04793 100644 --- a/src/util.ts +++ b/src/util.ts @@ -18,6 +18,47 @@ export const useIsMousePresent = () => { return present } +type Orientation = { + x: number, + y: number, + z: number, +} + +export const useOrientation = (useInitialDelta: boolean = false): Orientation | undefined => { + + const [orientation, setOrientation] = useState() + const [initial, setInitial] = useState() + + useEffect(() => { + if (!initial) + setInitial(orientation) + }, [orientation, initial]) + + useEffect(() => { + const handleOrientation = (event: DeviceMotionEvent) => { + setOrientation(event.accelerationIncludingGravity || undefined) + } + window.addEventListener('devicemotion', handleOrientation, true) + return () => window.removeEventListener('devicemotion', handleOrientation, true) + }, []) + + if (!orientation || !orientation.x || !orientation.y || !orientation.z) return + + if (!useInitialDelta) return { + x: orientation.x || 0, + y: orientation.y || 0, + z: orientation.z || 0, + } + + if (initial && orientation && initial.x && initial.y && initial.z) return { + x: orientation.x - initial.x, + y: orientation.y - initial.y, + z: orientation.z - initial.z, + } + + return +} + export const useMousePosition = () => { let [position, setPosition] = useState({ absolute: { x: 0, y: 0 }, relative: { x: 0, y: 0 } })