custom Mouse with javascript

here we wanna make a custom mouse with javascript, first step is to make a context for mouse:

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;

then we make a component for our mouse shape:

import React from "react";
import useMousePosition from "./useMousePosition";
const Cursor = ({ color, color1, scroll, left, right, drag, pos }) => {
  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",
          transform: "translate(-50%, -50%)",
          color: '#000',
        }}
      >
        <circle
          cx="25"
          cy="25"
          r="7.5"
          fill={ "#000"  }
          id="cursor"
        />
      </svg>
    </div>
  );
};
export default Cursor;

then we use them in a component

        <CursorContextProvider>
          <Cursor
          />
          {props.children}
         <div>
           mouse shape
        </div>
        </CursorContextProvider>

Comments

[JoelBonetR 🥇]

Hi Saba,
It would be nice if you provide a working example like embedding a codepen or similar, this way people can see it live and bring you feedback and appreciate your work
🙂

Best regards

[Saba beigi]

sure, thanks.
i will add a codepen