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>
Top comments (2)
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
sure, thanks.
i will add a codepen