porridger/front/src/hooks/useStoryDimensions.js

34 lines
839 B
JavaScript

import { useState, useEffect } from 'react';
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height
};
}
function useStoryDimensions(maxRatio = 16/9) {
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())
useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
const height = windowDimensions.height - 56
const ratio = Math.max(maxRatio, height / windowDimensions.width)
return {
height: height,
width: Math.round(height / ratio)
}
}
export default useStoryDimensions