Question 189707 in CSS Question posted in
Some basic documentation can be found here.

Css – I want to display a div on the mouseClick Coordinates

The div is actually a modal, I am using tailwind CSS with this

<div className={( displayModal ? 'block' : 'hidden' ) + ` w-screen h-screen absolute top-${hereIWantToPlaceXValueInPx} left=${hereIWantToPlaceYInPx} z-20 grid`}>
</div>

I want these pixel values

Tags:

2

Answers


  1. 0

    You need to capture the click event and then get the necessary coordinates from the event body, depending on your implementation, these are either screenX and screenY or clientY and clientX:

    const [position, setPosition] = useState(0);
  useEffect(() => {
    const handleClick = (event) => {
      // or event.clientY and event.clientX
      setPosition({
        x: event.screenX,
        y: event.screenY,
      });
    };

    window.addEventListener("click", handleClick);

    return () => {
      window.removeEventListener("click", handleClick);
    };
  }, []);
    Login or Signup to reply.
  2. 0

    You could store the mouse position in the state as an object and then use it when you return your JSX.

    The idea is simple, you’ll have a state named, for example, mousePos that is an object initialized as {x:0, y:0} (or whatever suits you) then you listen for the click event on the window to update your state which you can use to directly change the values in your className string.

    const MyComponent = props => {
  const [mousePos, setMousePos] = useState({
    x: 0,
    y: 0
  });
  useEffect(() => {
    // the click handler that updates the position state variable
    const clickHandler = e => setMousePos({
      x: event.clientX,
      y: event.clientY,
    });

    // listen for the click event on the window
    window.addEventListener('click', clickHandler);

    // on unmount simply remove the click listener
    return () =>
      window.removeEventListener('click', clickHandler);
  }, []);
  return (
      <div className = {`${props.displayModal ? 'block' : 'hidden'} w-screen h-screen absolute top-${mousePos.x} left=${mousePos.y} z-20 grid`}>
          I Am a model! 
      </div>;
  );
}

export default MyComponent;

    You might also create a custom hook that allows you to get the mouse position on any component you need, something like:

    export default function useMousePosition() {
  const [mousePos, setMousePos] = useState({
    x: 0,
    y: 0
  });
  useEffect(() => {
    const clickHandler = e => setMousePos({
      x: event.clientX,
      y: event.clientY,
    });
    window.addEventListener('click', clickHandler);
    return () =>
      window.removeEventListener('click', clickHandler);
  }, []);
  return mousePos;
}

// then use it as follow in your components
//   const mousePos = useMousePos();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search