From eef9d3a0bc90cb81cee6ceafa3459b07f000cc10 Mon Sep 17 00:00:00 2001 From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com> Date: Wed, 29 Dec 2021 17:12:42 -0600 Subject: [PATCH] split stuff up --- packages/docs/app/components/header.tsx | 16 +++++++ packages/docs/app/hooks/dom/use-scrolled.ts | 8 ++++ .../docs/app/hooks/dom/use-window-event.ts | 11 +++++ packages/docs/app/root.tsx | 44 +++---------------- packages/docs/app/routes/index.tsx | 4 +- 5 files changed, 45 insertions(+), 38 deletions(-) create mode 100644 packages/docs/app/components/header.tsx create mode 100644 packages/docs/app/hooks/dom/use-scrolled.ts create mode 100644 packages/docs/app/hooks/dom/use-window-event.ts diff --git a/packages/docs/app/components/header.tsx b/packages/docs/app/components/header.tsx new file mode 100644 index 0000000..8906e08 --- /dev/null +++ b/packages/docs/app/components/header.tsx @@ -0,0 +1,16 @@ +import clsx from "clsx" +import { useScrolled } from "~/hooks/dom/use-scrolled" + +export function Header({ children }: { children: React.ReactNode }) { + const isScrolled = useScrolled() + return ( +
+ {children} +
+ ) +} diff --git a/packages/docs/app/hooks/dom/use-scrolled.ts b/packages/docs/app/hooks/dom/use-scrolled.ts new file mode 100644 index 0000000..e441f9c --- /dev/null +++ b/packages/docs/app/hooks/dom/use-scrolled.ts @@ -0,0 +1,8 @@ +import { useState } from "react" +import { useWindowEvent } from "~/hooks/dom/use-window-event" + +export function useScrolled() { + const [scrolled, setScrolled] = useState(false) + useWindowEvent("scroll", () => setScrolled(window.scrollY > 0)) + return scrolled +} diff --git a/packages/docs/app/hooks/dom/use-window-event.ts b/packages/docs/app/hooks/dom/use-window-event.ts new file mode 100644 index 0000000..a76294b --- /dev/null +++ b/packages/docs/app/hooks/dom/use-window-event.ts @@ -0,0 +1,11 @@ +import { useEffect } from "react" + +export function useWindowEvent( + type: EventType, + handler: (event: WindowEventMap[EventType]) => void, +) { + useEffect(() => { + window.addEventListener(type, handler) + return () => window.removeEventListener(type, handler) + }) +} diff --git a/packages/docs/app/root.tsx b/packages/docs/app/root.tsx index c56a97e..f38cff7 100644 --- a/packages/docs/app/root.tsx +++ b/packages/docs/app/root.tsx @@ -1,5 +1,3 @@ -import clsx from "clsx" -import { useEffect, useState } from "react" import type { LinksFunction, MetaFunction } from "remix" import { Links, @@ -9,6 +7,7 @@ import { Scripts, ScrollRestoration, } from "remix" +import { Header } from "~/components/header" export const meta: MetaFunction = () => { return { title: "New Remix App" } @@ -28,8 +27,12 @@ export default function App() { -
-
+
+
+

reacord

+
+
+
@@ -39,36 +42,3 @@ export default function App() { ) } - -function Header() { - const isScrolled = useScrolled() - return ( -
-
-

reacord

-
-
- ) -} - -function useScrolled() { - const [isScrolled, setScrolled] = useState( - typeof window !== "undefined" && window.scrollY > 0, - ) - - useEffect(() => { - const handleScroll = () => { - setScrolled(window.scrollY > 0) - } - - window.addEventListener("scroll", handleScroll) - return () => window.removeEventListener("scroll", handleScroll) - }, []) - - return isScrolled -} diff --git a/packages/docs/app/routes/index.tsx b/packages/docs/app/routes/index.tsx index fd656af..2776c58 100644 --- a/packages/docs/app/routes/index.tsx +++ b/packages/docs/app/routes/index.tsx @@ -9,7 +9,9 @@ export default function Index() { const data: DocsJson = useLoaderData() return (
- 
{JSON.stringify(data, undefined, 2)}
+ 
+        {JSON.stringify(data, undefined, 2)}
+
) }