Change cursor on hover - has no affect

[newguy123-creator]

• three version: 0.169.0
• @react-three/fiber version: 8.17.10
• react-three-map version: 0.8.2
• node version: v20.11.1
• npm (or yarn) version: 10.2.4

Problem description:

Usually I can easily add code to my model tag in my canvas to change the cursor to a pointer in a regular R3F app, however this doesnt seem to work in react-three-map. No matter what I do, the cursor stays the "grab" cursor.

Relevant code:

<Model
    position={[-3.855, 0, 180.526]}
    onClick={handleClick}
    onPointerEnter={() => {
        document.body.style.cursor = "pointer";
    }}
    onPointerLeave={() => {
        document.body.style.cursor = "default";
    }}
/>

Suggested solution:

[RodrigoHamuy]

That's because Maplibre and Mapbox also have a cursor style. You can aim at the canvas instead of the document body to have priority in the CSS hierarchy.

[newguy123-creator]

That's because Maplibre and Mapbox also have a cursor style. You can aim at the canvas instead of the document body to have priority in the CSS hierarchy.

Yes I gathered that. The question therefore is, how can I overrirde it and make my style important?

[RodrigoHamuy]

I like to do it like this:

import { useCursor as useCursorDrei } from "@react-three/drei";
import { useMap } from "react-three-map";

export const useCursor = (active: boolean, onPointerOver: string) => {
	const map = useMap() as ReturnType<typeof useMap> | undefined;
	const defaultCursor = map ? "grab" : "auto";
	const cursorStyleContainer = map?.getCanvasContainer() || document.body;
	useCursorDrei(active, onPointerOver, defaultCursor, cursorStyleContainer);
};

[newguy123-creator]

I like to do it like this:

import { useCursor as useCursorDrei } from "@react-three/drei";
import { useMap } from "react-three-map";

export const useCursor = (active: boolean, onPointerOver: string) => {
	const map = useMap() as ReturnType<typeof useMap> | undefined;
	const defaultCursor = map ? "grab" : "auto";
	const cursorStyleContainer = map?.getCanvasContainer() || document.body;
	useCursorDrei(active, onPointerOver, defaultCursor, cursorStyleContainer);
};

Could you give me a slightly more complete example please?
I dont know what to do with this code snippet or where to add it in my code...

For example could you update any of your examples with the 2 cubes, to include this code please....

[RodrigoHamuy]

Sorry, I'm really busy at the moment, but here is the doc of the original useCursor :) https://drei.docs.pmnd.rs/misc/use-cursor
This is just a little wrapper on top to deal with the map provider.

Otherwise, following your code sample:

import { useMap } from "react-three-map";

const YourComponent = () => {
  const domElem = useMap()?.getCanvasContainer() || document.body;

  return <Model onPointerEnter={() => {
        domElem.style.cursor = "pointer";
      }}
      onPointerLeave={() => {
        domElem.style.cursor = "default";
      }}
  />
}