diff --git a/packages/app/src/Element/ProfileImage.tsx b/packages/app/src/Element/ProfileImage.tsx index 07519e5e..d365ac0f 100644 --- a/packages/app/src/Element/ProfileImage.tsx +++ b/packages/app/src/Element/ProfileImage.tsx @@ -8,7 +8,7 @@ import Avatar from "Element/Avatar"; import Nip05 from "Element/Nip05"; import { HexKey } from "@snort/nostr"; import { MetadataCache } from "State/Users"; -import useClientWidth from "Hooks/useClientWidth"; +import usePageWidth from "Hooks/usePageWidth"; export interface ProfileImageProps { pubkey: HexKey; diff --git a/packages/app/src/Hooks/usePageWidth.tsx b/packages/app/src/Hooks/usePageWidth.tsx new file mode 100644 index 00000000..9c8ff798 --- /dev/null +++ b/packages/app/src/Hooks/usePageWidth.tsx @@ -0,0 +1,20 @@ +import { useRef, useState, useEffect } from "react"; + +export default function usePageWidth() { + const ref = useRef(document.querySelector(".page")); + const [width, setWidth] = useState(0); + + useEffect(() => { + const updateSize = () => { + if (ref.current) { + setWidth(ref.current.offsetWidth); + } + }; + + window.addEventListener("resize", updateSize); + updateSize(); + return () => window.removeEventListener("resize", updateSize); + }, [ref]); + + return width; +}