useWindowScroll

"use client";
import { Button } from "@/ui/button";
import { Stack } from "@/ui/stack";
import { Typography } from "@/ui/typography";
import { useWindowScroll } from "@/hooks/use-window-scroll";

export function UseWindowScrollDemo() {
  const { bottom, scrollWindow, mounted, position } = useWindowScroll();

  if (!mounted) return null;

  return (
    <Stack align="center">
      <Button
        onClick={scrollWindow}
        className="w-max"
        /* onClick={() => scrollTo({ y: position.y + 250 })} // use scrollTo() to specify a scroll with a specific value */
      >
        Scroll to {bottom ? "top" : "bottom"}
      </Button>
      <Typography prose="muted">
        window scroll x=&#123;{position.x}&#125; y=&#123;{position.y}&#125;
      </Typography>
    </Stack>
  );
}