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 React, { CSSProperties, useEffect, useState } from "react";
|
||||||
|
|
||||||
import { Image } from "./Image";
|
import { Image } from "./Image";
|
||||||
|
@ -10,10 +11,11 @@ interface Props {
|
||||||
|
|
||||||
export function ShapesBackground({ getConfig }: Props) {
|
export function ShapesBackground({ getConfig }: Props) {
|
||||||
const [config, setConfig] = useState<ShapesConfig>({});
|
const [config, setConfig] = useState<ShapesConfig>({});
|
||||||
|
const { width, height } = useWindowDimension();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setConfig(getConfig?.() ?? {});
|
setConfig(getConfig?.() ?? {});
|
||||||
}, [getConfig]);
|
}, [getConfig, width, height]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.shapesContainer}>
|
<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