DEV Community

Saba beigi
Saba beigi

Posted on

5 2

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;
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

then we use them in a component

        <CursorContextProvider>
          <Cursor
          />
          {props.children}
         <div>
           mouse shape
        </div>
        </CursorContextProvider>
Enter fullscreen mode Exit fullscreen mode

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (2)

Collapse
 
joelbonetr profile image
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

Collapse
 
sababg profile image
Saba beigi

sure, thanks.
i will add a codepen

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay