Learn

Now it’s time to create our own custom hook! We’ll do so by creating a hook that uses the web browser’s Geolocation API. The Geolocation API allows us to get a user’s coordinates, enabling us to provide a custom experience to users based on their location. Let’s see how this API works before we use it.

The API is readily available by using the window.navigator.geolocation object (you can omit the window part). The API provides specific functions to either get the current position of a device (.getCurrentPosition()) or to continuously watch a device’s position (.watchPosition()).

When using either of these functions, passing a success callback function is required. This callback will be executed on successful execution of the Geolocation API and will be passed a position object containing the .coords property — the coordinates of the user’s device.

navigator.geolocation.getCurrentPosition((pos) => {
  console.log(‘Current Location’, pos.coords) // ← logs the current position of the device
})

Optionally an error callback function can be passed as the second argument, that will be executed if the API call fails.

function success() {
  console.log(‘Current Location’, pos.coords); // ← logs the current position of the device
};
function fail(error) {
  console.log('Uh oh something went wrong', error); // ← executes if the API failed
}
navigator.geolocation.watchPosition(success, fail);

Now that we have gone over the basics of the Geolocation API, let’s use what we have learned and make a reusable custom hook!

Head over to the code editor. In the components folder there are two component files to look at: HemisphereDisplay.js and LongitudeLatitudeDisplay.js. In each, you will find there is a variable currentLocation that each component expects to be the current coordinate position of the user. Currently the value is hard-coded to be null.

To make our application work properly, we will create a custom hook that will:

Manage location state with useState()
Use an effect to fetch the current location of the device with useEffect()
Return the location to the user of the hook

Let’s get started!

Instructions

In useGeolocation.js create a function called useGeolocation(). Then, export it as a named export.

Next, we’ll need to use the useState() hook. First, import it.

Then, inside the function body of your useGeolocation() hook, initialize a currentLocation state value and setter function. The initial value of currentLocation should be an empty object.

Next, we will use the useEffect() hook. First, import it.

Then, initialize a useEffect that will only execute once after render. Then in the body of the effect callback paste the following code.

const onSuccess = (e) => {
  setCurrentLocation({
    latitude: e.coords.latitude.toFixed(3),
    longitude: e.coords.longitude.toFixed(3)
  });
}
navigator.geolocation.getCurrentPosition(onSuccess);

After the useEffect() return the currentLocation.

At the top of HempisphereDisplay.js import useGeolocation from useGeolocation.js. Then, replace null with a call to useGeolocation(), storing the result in the variable currentLocation.

The file path to useGeolocation.js should be '../hooks/useGeolocation'.

And finally, at the top of LongitudeLatitudeDisplay.js import useGeolocation. Then, replace null with a call to useGeolocation(), storing the result in the variable currentLocation.

The file path to useGeolocation.js should be '../hooks/useGeolocation'.

Sign up to start coding

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?