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 value	Type	Description
options.enableHighAccuracy	boolean	enable high accuracy if true
options.timeout	number	timeout in milliseconds
options.maximumAge	number	maximumAge in milliseconds
options.when	boolean	this 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.