change Mouse color with scroll with javascript

in last post we made a custom mouse, in this mouse we wanna change that mouse color when we scroll our mouse.
first we should listen to our mouse to find out when the scroll is done, then we choose a color from our color list:

import React, { createContext, useState } from "react";

export const CursorContext = createContext();

const CursorContextProvider = (props) => {
  const [cursor, setCursor] = useState({ active: false });

  return (
    <CursorContext.Provider value={[cursor, setCursor]}>
      {props.children}
    </CursorContext.Provider>
  );
};

export default CursorContextProvider;

import React from "react";
import useMousePosition from "./useMousePosition";
const Cursor = ({ color, color1, scroll}) => {
  const { clientX, clientY } = useMousePosition();

  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 9999,
        pointerEvents: "none",
      }}
    >
      <svg
        width={500}
        height={500}
        viewBox="0 0 50 50"
        xmlns="http://www.w3.org/2000/svg"
        style={{
          position: "absolute",
          left:  clientX ,
          top:  clientY ,
          color: color,
        }}
      >
        <defs>
          <linearGradient id="myGradient" gradientTransform="rotate(90)">
            <stop offset="5%" stopColor={color} />
            <stop offset="95%" stopColor={color1} />
          </linearGradient>
        </defs>

        <circle
          cx="25"
          cy="25"
          r="7.5"
          fill={!scroll ? "url('#myGradient')" : color1}
          id="cursor"
        />
      </svg>
    </div>
  );
};
export default Cursor;

import { MouseContext } from "./context/mouse-context";
import { useContext, useEffect, useState } from "react";
import CursorContextProvider from "./context/CursorContextProvider";
import Cursor from "./hooks/Cursor";
import useMousePosition from "./hooks/useMousePosition";
import SleepMode from "./component/SleepMode/SleepMode";

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);

function App(props) {
  const { cursorType, cursorChangeHandler } = useContext(MouseContext);
  const [color, setColor] = useState([
    "#000000",
    "#3C6487",
    "#9682B4",
    "#A06E8C",
    "#A01E64",
    "#CD5078",
    "#D78CAA",
    "#6EB996",
    "#1E7850",
    "#3C6487",
    "#000000",
  ]);

  const [color1, setColor1] = useState(color[0]);
  const [color2, setColor2] = useState(color[0]);
  const [scroll, setScroll] = useState(false);
  const [scrolltop, setScrolltop] = useState("false");
  const [id, setId] = useState(0);
  const [up, setUp] = useState(0);
  const [dimensions, setDimensions] = useState({
    height: window.innerHeight,
    width: window.innerWidth,
  });
  const { clientX, clientY } = useMousePosition();


  let myTimeout = null;
  let myTimeout1 = null;
  function myStopFunction() {
    if (up >= 0) {
      if (id < color.length - 1) {
        setColor2(color[id + 1]);
        setColor1(color[id + 1]);
      } else {
        setColor2(color[color.length - 1]);
        setColor1(color[color.length - 1]);
      }
    } else {
      if (id !== 0) {
        setColor2(color[id - 1]);
        setColor1(color[id - 1]);
      } else {
        setColor2(color[0]);
        setColor1(color[0]);
      }
    }

    setScroll(true);
    setLeftnumbermax(id);
    setScrolltop("false");
  }




  useEffect(() => {
    setColor2(color[0]);
  }, []);
  useEffect(() => {
    if (leftnumber !== 0) {
      if (leftnumber % 2 !== 0) {
        if (
          leftnumber < color.length &&
          id < color.length - 1 &&
          leftnumbermax < color.length - 1
        ) {
          setId(id + 1);
          setColor1(color[id + 1]);
          setColor2(color[id + 1]);
        } else {
          if (id > 0) {
            setId(id - 1);
            setColor1(color[id - 1]);
            setColor2(color[id - 1]);
          } else {
            setId(0);
            setLeftnumbermax(0);
            setColor1(color[0]);
            setColor2(color[0]);
          }
        }
      }
    } else {
      setId(0);
      setColor1(color[0]);
      setColor2(color[0]);
    }
  }, [leftnumber]);

  window.addEventListener("wheel", (event) => {
    if (myTimeout) clearTimeout(myTimeout);
    setScroll(false);
    setLeftnumbermax(id);
    setScrolltop("true");
    const delta = Math.sign(event.deltaY);
    setUp(delta);
    if (id < color.length - 1 && delta > 0) {
      setColor1(color[id]);
      setColor2(color[id + 1]);
    } else {
      if (id === color.length - 1 && delta > 0) {
        setColor1(color[color.length - 1]);
        setColor2(color[color.length - 1]);
      } else if (id < color.length - 1 && delta < 0) {
        if (id !== 0) {
          setColor1(color[id]);
          setColor2(color[id - 1]);
        } else {
          setColor1(color[0]);
          setColor2(color[0]);
        }
      }
    }
    if (delta > 0) {
      if (id < color.length - 1) {
        setId(id + 1);
        setLeftnumbermax(id + 1);
      } else {
        setId(0);
        setLeftnumbermax(0);
      }
    } else if (delta < 0) {
      if (id > 0) {
        setId(id - 1);
        setLeftnumbermax(id - 1);
      } else {
        setId(color.length - 1);
        setLeftnumbermax(color.length - 1);
      }
    }
    myTimeout = setTimeout(myStopFunction, 1000);
  });

  return (
    <div
      className="App"
      style={{
        height: dimensions.height - 1,
        width: dimensions.width - 0.5,
        background: 
           !scroll
            ? `linear-gradient(180deg, ${color1}, ${color2})`
            : color2,
      }}
      onMouseDown={handleDown}
      onMouseUp={handleLeave}
      // onmousemove={handleMove}
    >

        <CursorContextProvider>
          <Cursor
            color={color1}
            color1={color2}
            scroll={scroll}
            left={left}
            right={right}
            drag={drag}
            pos={pos}
          />
          {props.children}
          <div
            className="Center_Circle"
            style={{
              background:
                 !scroll
                ? `linear-gradient(180deg, ${color1}, ${color2})`
                : color2,
              position: "fixed" ,
              left:  "50%",
              top: "50%",
              transform: "translate(-50%, -50%)",

            }}
          ></div>
        </CursorContextProvider>
    </div>
  );
}

export default App;