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'
.