react-navigator-geolocation

A react geolocationing hook

Installation

Yarn

$ yarn add react-navigator-geolocation

Npm

$ npm install react-navigator-geolocation

Examples

Simple syntax

import React from "react";
import useGeolocation from "react-navigator-geolocation";

const App: React.FC = () => {
  const { isEnabled, coords } = useGeolocation();

  return isEnabled ? (
    <h3>{ coords?.latitude + ', ' + coords?.longitude }</h3>
  ) : (
    <h4>Location permission is not enabled</h4>
  )
};

export default App;

Suppressed on mountage

import React from "react";
import useGeolocation from "react-navigator-geolocation";

const App: React.FC = () => {
  const { isAvailable, isEnabled, coords, suppressRequest } = useGeolocation({ suppressOnMount: true });

  return isAvailable ? (
    isEnabled ? (
      <div>
        <h1>Coordinates granted</h1>
        <h2>{coords?.latitude + ', ' + coords?.longitude}</h2>
      </div>
    ) : isEnabled === false ? (
      <h1>Location permission disabled</h1>
    ) : (
      <button type="button" onClick={() => suppressRequest(false)}>
        disable suppression
      </button>
    )
  ) : (
    <h1>Your browser doesn't support Geolocation API</h1>
  );
};

export default App;

Parameters

| Param | Type | Default | Definition | | :-------------- | :-----: | :-----: | :--------- | | suppressOnMount | boolean | false | Suppress request on mountage | | positionOptions | object | { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 } | Read more | | watchMode | boolean | false | When enable it returns periodically (by movement) coordinates |

useGeolocation({ suppressOnMount: false, positionOptions: { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }, watchMode: false })

Response

| Variable | Type | Definition | | :------: | :--: | :--------- | | isAvailable | boolean | Browser does support Geolocation API | | isSupressed | boolean | If request was suppressed | | isEnabled | boolean | If location is granted or denied | | isExpired | boolean | If request is timed out | | coords | object | Read more
| suppressRequest | method | It receives a boolean as value | | watchId | number | If watchMode is enabled you'll get the id of watching

const { isAvailable, isSupressed, isEnabled, isExpired, coords, suppressRequest, watchId } = useGeolocation(...)

License

MIT