Are there any option to show the custom cursor inside a certain component?

[Nithur-M]

I want to display the custom cursor only inside a certain component. I can set the opacity to 0 and add that component class inside the target array. But the problem is when I change the dimension, the cursor disappears, and I had to go out of the component and come back again to see the cursor. How can I do this? Thank you.

[ajmnz]

Hi, could you provide a reproduction of the problem you're facing? Codesandbox or a repo will work.

[Nithur-M]

Thanks for responding. my question is basically- is there a way to show this custom cursor only inside a certain component? I want to display this custom cursor whenever the user hovers over an image not throughout the full app.

[ajmnz]

The cursor by itself has a fixed position, so it is not possible to make it bound to an element. However, you could add it as a child of a container and modify that container's opacity if the user is hovering an image.

A quick example:

https://codesandbox.io/s/prod-rain-b4eumj?file=/src/App.js

import "./styles.css";
import CustomCursor from "custom-cursor-react";
import "custom-cursor-react/dist/index.css";

export default function App() {
  return (
    <div className="App">
      <div
        style={{ width: 200, height: 200, border: "1px solid red" }}
        onMouseEnter={() => {
          document.querySelector(".cursor-container").style.opacity = "1";
        }}
        onMouseLeave={() => {
          document.querySelector(".cursor-container").style.opacity = "0";
        }}
      ></div>
      <div
        className="cursor-container"
        style={{ transition: "opacity .2s ease-out" }}
      >
        <CustomCursor></CustomCursor>
      </div>
    </div>
  );
}

Either way, I'm working on a rewrite that should make things a lot easier.