Get current Geolocation of user using React-Geolocated

15 Dec, 2021
In some situations, applications need to access the current location properties of the user. Location properties include latitude, longitude, and some more about the current location of the user. From the Location properties, the user can know the current geolocation of the user.
The app can provide specific services to the user according to current geolocation. For example, the Wheather app shows the current weather of the user’s current geolocation using OpenWeatherMap API. The app with a map integration can show the current location of the user on the Google map using Google Maps API.
In this tutorial, we will learn to access the current geolocation properties of users in react js by using the geolocated package. By using the react-geolocated package, the user can get the following details.
Latitude
Longitude
Altitude
Accuracy
speed
Users need to first set up the react project environment on their local computer.
Creating new react project
Step 1: To create a new react app, run the below command to your terminal.
npx create-react-app testapp
Step 2: Now, move inside the project directory using the below command.
cd testapp
Project Directory: It should look like the below image.
Step 3: Install the react-Geolocated package inside your project directory by running the below command in the terminal.
npm install react-geolocated --save
Now, we are ready to get the geolocation of the user using the react-geolocated.
Syntax:
1. Check if browser is supporting geolocated or not
   if(this.props.isGeolocationAvailable) {
     
     a. check if location in browser is enabled or not
        if(this.props.isGeolocationEnabled){
         
         i. check if coordinates of current location is 
             available or not
            if(this.props.coords){
            render the coordinates of current location.
            }  
        }     
    }
Example: Now, edit the app.js file and copy/paste the below code into it.
In this file, we will import the react-geolocated package and print the coordinates of the current location. We will bind the App component with the reducer function geolocated(). The geolocated Reducer function assigns the props to the app component when it will be rendered.
Filename: App.js
Javascript
import React, { Component } from "react"; // Importing geolocated reducer functionimport { geolocated } from "react-geolocated"; class App extends Component {  render() {     // Check geolocation supported in    // browser or not    return this.props.isGeolocationAvailable ? (       // Check location is enable in      // browser or not      this.props.isGeolocationEnabled ? (         // Check coordinates of current        // location is available or not        this.props.coords ? (          <div>            <h1 style={{ color: "green" }}>GeeksForGeeks</h1>            <h3 style={{ color: "red" }}>              Current latitude and longitude of the user is            </h3>            <ul>              <li>latitude - {this.props.coords.latitude}</li>              <li>longitude - {this.props.coords.longitude}</li>            </ul>          </div>        ) : (          <h1>Getting the location data</h1>        )      ) : (        <h1>Please enable location on your browser</h1>      )    ) : (      <h1>Please, update your or change the browser </h1>    );  }} // Binding geolocated() reducer function to// App component, while exporting itexport default geolocated()(App);
Step to run: To run the project, enter the below command to your terminal in the project directory.
npm start
Output:
Supported browsers: Only below browser with the specific version supports the react-geolocated.
Chrome ≥ 5
Firefox ≥ 3.5
Internet Explorer ≥ 9
Opera ≥ 10.60
Safari ≥ 5
Reference: https://www.npmjs.com/package/react-geolocated
prachisoda1234
adnanirshad158
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS useNavigate() Hook
How to install bootstrap in React.js ?
How to create a multi-page website using React.js ?
How to do crud operations in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React