https://github.com/jsoncruz/react-navigator-geolocation
A react geolocation hook
https://github.com/jsoncruz/react-navigator-geolocation
coordinates geolocation hook reactjs
Last synced: 3 months ago
JSON representation
A react geolocation hook
- Host: GitHub
- URL: https://github.com/jsoncruz/react-navigator-geolocation
- Owner: jsoncruz
- License: mit
- Created: 2020-05-25T22:00:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-30T05:52:14.000Z (over 2 years ago)
- Last Synced: 2025-09-26T00:58:31.295Z (7 months ago)
- Topics: coordinates, geolocation, hook, reactjs
- Language: TypeScript
- Homepage:
- Size: 354 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-navigator-geolocation
A react geolocationing hook
## Installation
**Yarn**
```console
$ yarn add react-navigator-geolocation
```
**Npm**
```console
$ npm install react-navigator-geolocation
```
## Examples
[](https://codesandbox.io/s/distracted-hellman-8ychm?fontsize=14&hidenavigation=1&theme=dark)
*Simple syntax*
```TSX
import React from "react";
import useGeolocation from "react-navigator-geolocation";
const App: React.FC = () => {
const { isEnabled, coords } = useGeolocation();
return isEnabled ? (
{ coords?.latitude + ', ' + coords?.longitude }
) : (
Location permission is not enabled
)
};
export default App;
```
[](https://codesandbox.io/s/cold-voice-ofn2p?fontsize=14&hidenavigation=1&theme=dark)
*Suppressed on mountage*
```TSX
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 ? (
Coordinates granted
{coords?.latitude + ', ' + coords?.longitude}
) : isEnabled === false ? (
Location permission disabled
) : (
suppressRequest(false)}>
disable suppression
)
) : (
Your browser doesn't support Geolocation API
);
};
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](https://developer.mozilla.org/pt-BR/docs/Web/API/PositionOptions) |
| 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](https://developer.mozilla.org/pt-BR/docs/Web/API/GeolocationCoordinates)
| 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](https://github.com/dev-judsoncruz/react-navigator-geolocation/blob/master/LICENSE)