How to use mouse coordinates to make an image button with React.

Starting my Phase 2 Project for the Software Engineering course I'm enrolled in at Flatiron school I was honestly a bit unsure and even scared about one obstacle, finding and using mouse coordinates. Starting off my project partners and I came up with the idea to make a simple point and clicker game. We were then informed that a good way to do this would be to select a section of the window and using coordinates we could turn that given area into a button. Before I get into this I would like to say I'm only a student and my knowledge of JS and React is not big. Secondly, finding the mouse coordinates are very simple but instead of writing out a whole new, probably worse explanation, here is the explanation I followed by Jason Brown. Anyways let's get into it.

Assuming you followed Mr. Brown's tutorial you should have a useMousePosition component all ready to go. I'm going to use the art I made from the project as an example and introduce you to Slippy.

Above you can see currently Slippy is sleeping, I would like to be able to click on the WAKE button to well wake him up. Thanks to useMousePosition, the coordinates of the button, and some conditional logic I can do so, lets go ahead and put this image of Slippy in an useState after importing both the image and hook.

Let's start by grabbing the coordinates of each corner we want.

You should end up with four different numbers, two for the x position and two for the y position. Make sure to write those numbers down, and separate them according to which x and y go together.

Now before anything else, you need to import useMousePosition into the component you want to use it in and save it to a variable as a value to be used later on. I also like to take it a step further and destructor and save x and y as well, like so.

import React { useState } from "react";
import slippySleeping from "./images/slippySleeping.gif";
import { useMousePosition } from "./useMousePosition";

App function(){
  const [slippy, setSlippy] = usestate(slippySleeping)

  const position = useMousePosition();
  const x = position.x;
  const y = position.y;

  return (
   <img src={slippy} alt="Slippy Sleeping" />
  );
};

export default App;

Now that we have this set up we can add an on click to the image tag and link a function inside of it. Let's call the function wakeSlippy. This function will hold the conditional logic and change the previous state to a new state, with that in mind make sure to import your second image. You should end up with something like this.

import React { useState } from "react";
import slippySleeping from "./images/slippySleeping.gif";
import awakeSlippy from "./images/awakeSlippy.gif";
import { useMousePosition } from "./useMousePosition";

App function(){
  const [slippy, setSlippy] = usestate(slippySleeping)

  const position = useMousePosition();
  const x = position.x;
  const y = position.y;

  function wakeSlippy(){
    setSlippy(awakeSlippy);
  }

  return (
   <img src={slippy} onClick={wakeSlippy} alt="Slippy Sleeping" />
  );
};

export default App;

What we have right now will change the image no matter where we click on the image, let's fix that. Remember those coordinates? Well, it's time to use them. The conditional logic should look something like this.

if(x < biggerNumX && y < biggerNumY && x > lesserNumX && y > lesserNumY) { 
  setSlippy(awakeSlippy;
}

What we've done here is find the corners of the button and make
a square with the conditional logic. Now all you need to do is put it into the wakeSleepy function and you should have something like this.

If you wanted to put Slippy back to bed all you'd need to do is get the coordinates for the bed and add some more conditional logic and that's it, pretty simple! One final word, this method of making buttons can be pretty unreliable unless you update your code for all screen sizes.