45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
|
|
//#region src/hooks/use-keyboard-height.tsx
|
|
/**
|
|
* Hook to detect mobile keyboard appearance and calculate available viewport height.
|
|
* Uses the Visual Viewport API to track keyboard state on mobile devices.
|
|
*
|
|
* @returns KeyboardState object with keyboard information
|
|
*/
|
|
function useKeyboardHeight() {
|
|
const [keyboardState, setKeyboardState] = useState({
|
|
isKeyboardOpen: false,
|
|
keyboardHeight: 0,
|
|
availableHeight: typeof window !== "undefined" ? window.innerHeight : 0,
|
|
viewportHeight: typeof window !== "undefined" ? window.innerHeight : 0
|
|
});
|
|
useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
const visualViewport = window.visualViewport;
|
|
if (!visualViewport) return;
|
|
const updateKeyboardState = () => {
|
|
const layoutHeight = window.innerHeight;
|
|
const visualHeight = visualViewport.height;
|
|
const keyboardHeight = Math.max(0, layoutHeight - visualHeight);
|
|
setKeyboardState({
|
|
isKeyboardOpen: keyboardHeight > 150,
|
|
keyboardHeight,
|
|
availableHeight: visualHeight,
|
|
viewportHeight: layoutHeight
|
|
});
|
|
};
|
|
updateKeyboardState();
|
|
visualViewport.addEventListener("resize", updateKeyboardState);
|
|
visualViewport.addEventListener("scroll", updateKeyboardState);
|
|
return () => {
|
|
visualViewport.removeEventListener("resize", updateKeyboardState);
|
|
visualViewport.removeEventListener("scroll", updateKeyboardState);
|
|
};
|
|
}, []);
|
|
return keyboardState;
|
|
}
|
|
|
|
//#endregion
|
|
export { useKeyboardHeight };
|
|
//# sourceMappingURL=use-keyboard-height.mjs.map
|