Use useWindowDimension hook in shapes background
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
35ba440636
commit
ef3c8d2eac
|
@ -1,3 +1,4 @@
|
|||
import { useWindowDimension } from "hooks/useWindowDimension";
|
||||
import React, { CSSProperties, useEffect, useState } from "react";
|
||||
|
||||
import { Image } from "./Image";
|
||||
|
@ -10,10 +11,11 @@ interface Props {
|
|||
|
||||
export function ShapesBackground({ getConfig }: Props) {
|
||||
const [config, setConfig] = useState<ShapesConfig>({});
|
||||
const { width, height } = useWindowDimension();
|
||||
|
||||
useEffect(() => {
|
||||
setConfig(getConfig?.() ?? {});
|
||||
}, [getConfig]);
|
||||
}, [getConfig, width, height]);
|
||||
|
||||
return (
|
||||
<div className={styles.shapesContainer}>
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
interface WindowDimension {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
function getWindowDimension() {
|
||||
const { innerWidth: width, innerHeight: height } = window;
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
};
|
||||
}
|
||||
|
||||
export function useWindowDimension(): WindowDimension {
|
||||
const [windowSize, setWindowDimension] = useState<WindowDimension>({
|
||||
width: 0,
|
||||
height: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setWindowDimension(getWindowDimension());
|
||||
};
|
||||
|
||||
// Set size at the first client-side load
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return windowSize;
|
||||
}
|
Loading…
Reference in New Issue