import { useState } from "react"; function useGeolocation() { const [isLoading, setIsLoading] = useState(false); const [position, setPosition] = useState({}); const [error, setError] = useState(null); function getPosition() { if (!navigator.geolocation) return setError("Your browser does not support geolocation"); setIsLoading(true); navigator.geolocation.getCurrentPosition( (pos) => { setPosition({ lat: pos.coords.latitude, lng: pos.coords.longitude }); setIsLoading(false); }, (error) => { setError(error.message); setIsLoading(false); } ); } return { isLoading, position, error, getPosition }; } export default function App() { const { isLoading, position: { lat, lng }, error, getPosition } = useGeolocation(); const [countClicks, setCountClicks] = useState(0); function handleClick() { setCountClicks((count) => count + 1); getPosition(); } return ( <div> <button onClick={handleClick} disabled={isLoading}> Get my position </button> {isLoading && <p>Loading position...</p>} {error && <p>{error}</p>} {!isLoading && !error && lat && lng && ( <p> Your GPS position:{" "} <a target="_blank" rel="noreferrer" href={`https://www.openstreetmap.org/#map=16/${lat}/${lng}`} > {lat}, {lng} </a> </p> )} <p>You requested position {countClicks} times</p> </div> ); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter