Skip to main content
Version: 5.7.2

useGeolocation

About​

A hook to provide the geolocation info on client side.

Installation​

npm install --save rooks

Importing the hook​

import { useGeolocation } from "rooks";

Usage​

1. Getting geolocation in a component​

function App() {
const geoObj = useGeolocation();

return (
<div
style={{
display: "flex",
alignItems: "center",
flexDirection: "column",
}}
>
<p>{geoObj && JSON.stringify(geoObj)}</p>
</div>
);
}
render(<App />);

2. Getting geolocation in a component on some condition​

function App() {
const [when, setWhen] = React.useState(false);

const geoObj = useGeolocation({
when,
});

return (
<div
style={{
display: "flex",
alignItems: "center",
flexDirection: "column",
}}
>
<button
onClick={() => {
setWhen(true);
}}
>
Get Geolocation
</button>
<p>{geoObj && JSON.stringify(geoObj)}</p>
</div>
);
}
render(<App />);

Arguments​

The argument is an object with the following optional items:

Argument valueTypeDescription
options.enableHighAccuracybooleanenable high accuracy if true
options.timeoutnumbertimeout in milliseconds
options.maximumAgenumbermaximumAge in milliseconds
options.whenbooleanthis hook will run when when is true

Returns​

Returns an object with following items:

{
lat?: number;
lng?: number;
isError: boolean;
message: string;
}

Codesandbox Example​

Basic Usage​

Join Bhargav's discord server​

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.