useOnWindowScroll

import "./styles.css";
import { useOnWindowScroll } from "rooks";

function App() {
  useOnWindowScroll(() => console.log("window scrolled"));
  return (
    <div
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <h1>Rooks : useOnWindowScroll example</h1>
      <p>Scroll Down</p>

      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <div
          style={{
            width: "200px",
            height: "800px",
            backgroundColor: "teal",
            marginTop: "20px",
          }}
        ></div>
      </div>
      <p>Scroll Up</p>
    </div>
  );
}

export default App;

import { useState } from "react";
import { useOnWindowScroll } from "rooks";

function ScrollTracker() {
  const [events, setEvents] = useState(0);
  const [enabled, setEnabled] = useState(true);

  useOnWindowScroll(() => {
    setEvents((current) => current + 1);
  }, enabled);

  return (
    <div>
      <button onClick={() => setEnabled((current) => !current)}>
        {enabled ? "Pause scroll tracking" : "Resume scroll tracking"}
      </button>
      <p>Scroll events recorded: {events}</p>
    </div>
  );
}