react-hooks-geolocation
react-hooks-geolocation is React hooks which allows you to handle geolocation API easily with less code.
Demo
Here is the demo page
demo.mov
Getting Started
Install:
npm install react react-hooks-geolocation
# or
yarn add react react-hooks-geolocation
Usage
import useGeolocation from "react-hooks-geolocation";
const {location,loading,metaInfo, activate, update, watch, unwatch} = useGeolocation({defaultActive: false, (loc, meta) => {console.log(loc, meta)});
//Watch geolocation
const handleWatchLocation = () => {
watch();
};
//Release event handler of watching geolocation
const handleUnwatchLocation = () => {
unwatch();
};
//Get controll of activation
const activateGeolocation = () => {
activate();
};
//Update geolocation whenever you want
const handleUpdateGeolocation = () => {
update();
}
return(
<div>
{
loading ? "loading" : {location.latitude}
}
</div>
)Type
export type Location = {
latitude: number;
longitude: number;
altitude: number | null;
};
export type MetaInfo = {
altitudeAccuracy: number | null;
accuracy: number | null;
heading: number | null;
speed: number | null;
};
export type ErrType =
| 'PERMISSION_DENIED'
| 'POSITION_UNAVAILABLE'
| 'TIMEOUT'
| 'OTHER';
export type Err = {
type: ErrType;
message: string;
};
export type Args = {
defaultActive?: boolean;
onGeolocationChange?: (location?: Location, metaInfo?: MetaInfo) => void;
geolocation?: Geolocation;
};