"use client"; import { useEffect, useState } from "react"; /** * This hook allows components to use `document` as like they're always in the client side. * Return undefined if there is no `document` (which represents it's server side) or initial render(to avoid hydration error). */ function useDocument(): undefined | Document { const [initialRender, setInitialState] = useState(true); useEffect(() => { setInitialState(false); }, []); if (typeof document === "undefined" || initialRender) return undefined; return document; } export { useDocument };