DEV Community: Norbert Bartos

Use Geolocation API with React Hooks

Norbert Bartos — Wed, 15 Apr 2020 14:24:14 +0000

There are some interesting and useful Web APIs built into the browsers and Geolocation API is one of them. It is used to determine the users location using longitude and latitude coordinates. However there are some difficulties which you will need to count:

It's asynchronous
Needs permission from the user
Decide which approach will you need

How to use the API?

Once you verified that the target browser supports it then you can access the location data by calling the navigator.geolocation's getCurrentPosition method or by assigning a location watch listener using the watchPosition. The last one will emit the results if the device location has changed.

It's async. This means that if you call the API it will take unpredictable time for the device to return the current coordinates from the user's location. You can handle this via callbacks:

const successHandler = position => console.log(position.coord);

const errorHandler = error => console.error(error.message);

navigator.geolocation.getCurrentPosition(successHandler, errorHandler);

// Or using the watch method:

const locationWatchId = navigator.geolocation.watchPosition(successHandler, errorHandler);

To listen the location changes you can use the watchPosition method, but don't forget to clear the listener if you don't need it anymore to avoid memory leaks. You can do that by calling the clearWatch method with the listener id:

navigator.geolocation.clearWatch(locationWatchId);

Options

You can provide few options to it:

enableHighAccuracy: The API can provide more accurate coordinates, but it costs in slower response time.
timeout: You can set the response timeout in milliseconds which means that it will call the error callback if the device doesn't send any location information during that time.
maximumAge: You are able to set the time in milliseconds while the API can return the values from the cache

Usage:

export const geolocationOptions = {
  enableHighAccuracy: true,
  timeout: 1000 * 60 * 1, // 1 min (1000 ms * 60 sec * 1 minute = 60 000ms)
  maximumAge: 1000 * 3600 * 24 // 24 hour
};

navigator.geolocation.getCurrentPosition(successHandler, errorHandler, geolocationOptions);

How can you use it in your custom React Hooks?

*This section requires a basic understanding how React hooks works.

I have prepared an example using the basic Create React App starter to demonstrate how this native Web API works with React Hooks. You can find the full source code here: Open the Repo

Using the current location

Create a custom hook which will call the Geolocation API using the getCurrentPosition method.

First you need to verify if the geolocation is supported in the target browser. To do this you can check if the navigator has the geolocation property. Later you can display user friendly errors, but to do this you should create a local state to hold the possible error messages.

const useCurrentLocation = () => {
  // store error message in state
  const [error, setError] = useState();

  useEffect(() => {
    // If the geolocation is not defined in the used browser you can handle it as an error
    if (!navigator.geolocation) {
      setError('Geolocation is not supported.');
      return;
    }
  }, []);
};

You have to prepare your custom hook to store the Geolocation API results locally, so you should extend your state with another value called location and expose it from the hook for further usage.

const useCurrentLocation = () => {
  // ...

  // store location in state
  const [location, setLocation] = useState();

  // ...

  // Expose location result and the possible error message
  return { location, error };
};

Okay, so you have prepared everything to call the actual Geolocation API method. Right?

Not yet.

You will need to pass the success and error callbacks to the getCurrentPosition method, but you haven't created these handlers yet. Let's do that:

const useCurrentLocation = () => {
  // ...

  // Success handler for geolocation's `getCurrentPosition` method
  const handleSuccess = position => {
    const { latitude, longitude } = position.coords;

    setLocation({
      latitude,
      longitude
    });
  };

  // Error handler for geolocation's `getCurrentPosition` method
  const handleError = error => {
    setError(error.message);
  };

  // ...
};

The handleSuccess will destruct the longitude and latitude values from the location results and set the new values into your local state variable.

The handleError will set any error message coming from the Geolocation API into the local error state variable. This callback is called when getting the location times out or the user denies the asked permissions.

Now you are ready to call what you need to retrieve the user's location. To do this you can call the above mentioned getCurrentPosition method inside your useEffect hook.

useEffect(() => {
  // ...

  // Call the Geolocation API
  navigator.geolocation.getCurrentPosition(handleSuccess, handleError);

  // ...
}, []);

You can add some additional behavior to your newly created custom hook with Geolocation options. I decided to pass these settings as an optional object parameter to the custom hook.

Note: You use geolocation inside useEffect and if you would like to pass your options argument to the getCurrentPosition method then you have to add it to the useEffect hook's dependency list. This will help you to rerun the location API again with the new options if the reference of this parameter changes.

const useCurrentLocation = (options = {}) => {
  // ...

  useEffect(() => {
    // ...

    // Call the Geolocation API with options
    navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);

    // ...
    // Add options parameter to the dependency list
  }, [options]);

  // ...
};

Usage of the useCurrentLocation hook

const geolocationOptions = {
  // Using this option you can define when should the location request timeout and
  // call the error callback with timeout message.
  timeout: 1000 * 60 * 1 // 1 min (1000 ms * 60 sec * 1 minute = 60 000ms)
};

function App() {
  const { location, error } = useCurrentLocation(geolocationOptions);

  return (
    <div>
      <h1>HTML Geolocation API with React Hooks example</h1>;
      {location ? (
        <code>
          Latitude: {location.latitude}, Longitude: {location.longitude}
        </code>
      ) : (
        <p>Loading...</p>
      )}
      {error && <p>Location Error: {error}</p>}
    </div>
  );
}

See the result in the browser:

Listen to device location changes

What if you need to track the user's location while they are using your application?

This would be the right time to choose the watchPosition over the getCurrentLocation. However it can be useful any time when you need to interrupt the location request manually.

For example: if your application makes possible for the users to set the position manually while you already started to access their location automatically.

This is not possible when you are using the current location request, but you can save yourself with the provided location listener. You can prepare for these cases combined the watchPosition and the clearWatch methods.

To achieve this functionality you just need to do some minor modifications on the previously created useCurrentLocation custom hook.

First what you need is create a ref variable in the custom hook. This will help you to keep the reference of the listener instance by assigning the returned value of the watchPosition to it.

const useWatchLocation = (options = {}) => {
  // ...

  // save the returned id from the geolocation's `watchPosition`
  // to be able to cancel the watch instance.
  const locationWatchId = useRef(null);

  // ...
};

Assign the location listener inside useEffect similar like you did for the getCurrentLocation.

const useWatchLocation = (options = {}) => {
  // ...

  useEffect(() => {
    // ...

    // Start to watch the location with the Geolocation API
    locationWatchId.current = navigator.geolocation.watchPosition(handleSuccess, handleError, options);

    // ...
  }, [options]);

  // ...
};

Last thing you have to do is implement the clear up logic. React can unmount components which are using this location hook. To prepare for this case you have to pay attention to clear every listener to avoid any memory leaks in your application. You can reach this by extending the useEffect with its returned function. This can be defined by you, so in this case the returned function will call the clearWatch method from the Geolocation API using the tracked listener id.

Also if you need to cancel the location tracking programmatically, then you can expose the implemented clear up function from your custom hook.

const useWatchLocation = (options = {}) => {
  // ...

  // Clears the watch instance based on the saved watch id
  const cancelLocationWatch = () => {
    if (locationWatchId.current && navigator.geolocation) {
      navigator.geolocation.clearWatch(locationWatchId.current);
    }
  };

  useEffect(() => {
    // ...

    // Clear the location watch instance when React unmounts the used component
    return cancelLocationWatch;
  }, [options]);

  // ...

  // Exposed results and public cancel method to clear the location listener manually.
  return { location, cancelLocationWatch, error };
};

Usage of the useWatchLocation hook

function App() {
  const { location, cancelLocationWatch, error } = useWatchLocation();

  useEffect(() => {
    if (!location) return;

    // Cancel location watch after 3sec once the location was found.
    setTimeout(() => {
      cancelLocationWatch();
    }, 3000);
  }, [location, cancelLocationWatch]);

  // ...
}

Source code: Open the Repo. Feel free to check out and play around with it. You can extend the code with your custom logic, optimize it to avoid unnecessary rerenders in your components etc.

You can read more about the Geolocation API in the docs.

Everybody has to start somewhere

Norbert Bartos — Thu, 09 Apr 2020 14:35:17 +0000

I remember when I was at the beginning of my career and I was lost as I assume everybody. I feel something like that at this moment, because I decided to try write a blog which is totally far from me. So, if we are in the same boat I want to share my advices and experiences with everybody, but especially with those who are just starting to work in the IT industry.

When I started my developer journey I was full of questions and I wanted to act: What should I do next? At that time I felt totally stupid and I had no experience in any field.

Later I realized that it was okay, I just had impossible expectations about myself at the beginning of the long story. I wanted to know everything and I mostly compered myself to others. I mean to the big names in the IT. However keep in mind these famous and successful people started at somewhere too.

Blogging is something I was sure that I will never do, because I thought that I don’t really have anything what I would like to share with broad audience. Right now I am here and writing this post and I plan to share on my personal blog. Why?

Think about what I told you that I had some wild expectations about my skills and that’s why I usually felt ashamed. I was afraid from people’s reactions. What will they say? Who I am to give advice for someone else? How can I do everything correctly? Now I have some years of experience with knowledge in web development and I feel more confident, but it took time and lot of work to reach this phase in my life.

These are my advices for you if you want to avoid the stress from your journey (believe me, it hurts…):

Find your niche as soon as possible
Time will solve a lot of things, be patient
Don’t forget that hard work will always beat the talent

Find your niche

This advice is really important. I think it’s always good to try out and see as many things as you can. It helps you to decide which one is closer to you. If you feel comfortable doing something then go ahead with that. When you found what makes you happy then it will be much easier to be productive in that field. I was sure that I want to be a programmer in the future, but I didn’t know what to develop and where to start. Later I had photo manipulation and 3D modelling as a hobby and I realized that I am mostly a visual type of person. I like nice images and to create everything what other people see and use.

Okay, so I want to develop something what is close to design and visualization. Let’s do UI development for my friend’s business. Well… it was ok, but to be honest I missed the complex technical solutions, so during my studies I dived a little bit deeper in web development and I joined to a local company as an intern and I started to work on frontend heavy web applications.

Yeah, I have found my niche. I am happy to create nice and smoothly working web applications using trending frontend frameworks just to satisfy the customers. That’s what you will have to find too. It helps you specialize, you can plan your learning path. It makes you productive and valuable for companies, because you just do what you love.

Time and patience

You will have to learn lot of things especially if you want to be a developer, be prepared for that. The key is you will have time to do that and the learning is continuous rather than a single point in your life. Don’t expect that you finish a computer science degree and you will know everything. The skills and the knowledge will come by time.

For example I stressed a lot, because I had no clue about the SPAs and frontend frameworks like Angular or React. A lot of developers did good tutorials about these tools and it looked so easy for them. I felt that I am on a wrong path, I didn’t even know which framework should I choose to learn.

Please just don’t overthink this…

You will know where to start when that opportunity comes into the picture. I think the best you can do is find an internship or a junior position based on your previously chosen niche/specialization at a company where the mentoring mentality is there. It’s possible that you will end up with a good mentor and she will show the paths you can take during your career and helps you to start learning what they actually need to solve real world problems.

Hard work beats the talent

I guess everybody met once with someone who had one specific talent and it was so easy and natural for her to achieve results. Yes, you was jealous in some way…

If I had to choose from two job candidates, the first is very talented from the beginning and she knows what is enough to work in this industry without putting any energy in it, the second candidate has a good attitude and has the ability to learn and grow in her field.

I would prefer the second.

What I am talking about? Maybe the employer would win the jackpot with the first one, she could work on our projects asap. Well, that’s true in some cases for the companies, but don’t forget about the long term plans. What can our first candidate achieve? She will close some tasks and she will feel that her job is done. On the other hand the hard worker, I am sure that will deliver a good amount of work and will help for other developers to reach the project goals and lastly will keep herself up to date for the next challenges.

What are the differences from the clients perspective? If you work hard you do from the passion. It always means that you care about what are you doing. You not only finish your tasks, but you are thinking how can you deliver more value for your customers, you start to care about the project vision and once you take the ownership of the project you will feel that your are part of the mission to make it successful.

Be a hard worker instead of act like the talents.