use-live-geolocation 🌍

A simple and lightweight React hook to track real-time user location using the browser’s Geolocation API.

It uses watchPosition() to continuously update latitude and longitude — perfect for maps, delivery apps, fitness trackers, and location-based features.

🚀 Features

• 📍 Real-time GPS tracking
• ⚡ Uses watchPosition() API
• 🧹 Auto cleanup with clearWatch()
• 🪶 Lightweight and dependency-free
• ⚛️ Works with React 18+

📦 Installation

npm install use-live-geolocation

🧠 Usage

import { useLiveGeolocation } from "use-live-geolocation";

function App() {
  const { latitude, longitude, loading, error } =
    useLiveGeolocation();

  if (loading) return <h2>Tracking location...</h2>;
  if (error) return <h2>Error: {error}</h2>;

  return (
    <div>
      <h1>📍 Live Location</h1>
      <p>Latitude: {latitude}</p>
      <p>Longitude: {longitude}</p>
    </div>
  );
}

export default App;

⚙️ How it works

This hook uses the browser API:

navigator.geolocation.watchPosition()

It continuously listens for location changes and updates React state in real time.

📡 API Response

The hook returns:

{
  latitude: number,
  longitude: number,
  loading: boolean,
  error: string | null
}

🔥 Example Use Cases

• 🚗 Delivery tracking apps
• 🗺️ Google Maps integrations
• 🏃 Fitness / running apps
• 📱 Location-based services

🧹 Cleanup

The hook automatically stops tracking when the component unmounts:

navigator.geolocation.clearWatch(watchId);

⚠️ Important Notes

• Requires user permission to access location
• Works only on HTTPS or localhost
• May not be 100% accurate indoors
• Mobile devices give best results

📈 Future Improvements

• Add speed tracking 🚗
• Add distance calculation 📏
• Add reverse geocoding (city/country) 🌍
• Add Google Maps link generator 🗺️

🧑‍💻 Author

Built as part of a React Hooks series for learning and npm publishing practice.

📜 License

MIT