Sensors

useGeolocation

Reactively tracks the user's geographic position using the Geolocation API. Wraps navigator.geolocation.watchPosition with observable state and pause/resume controls.

Demo

Geolocation

Not Supported

Paused

Track your geographic position. Click Start to begin.

Latitude

—

Longitude

—

Accuracy

—

import { 
const useGeolocation: (options?: DeepMaybeObservable<UseGeolocationOptions>) => UseGeolocationReturn
useGeolocation } from "@usels/web";

function 
function LocationTracker(): JSX.Element
LocationTracker() {
  const { 
const isSupported$: ReadonlyObservable<boolean>
isSupported$, 
const isActive$: ReadonlyObservable<boolean>
isActive$, 
const coords$: ReadonlyObservable<UseGeolocationCoords>
Current position coordinates
coords$, 
const locatedAt$: ReadonlyObservable<number | null>
Timestamp of last successful position update
locatedAt$, 
const error$: ReadonlyObservable<any>
Last geolocation error
error$, 
const pause: Fn
pause, 
const resume: Fn
resume } =
    
function useGeolocation(options?: DeepMaybeObservable<UseGeolocationOptions>): UseGeolocationReturn
Framework-agnostic reactive wrapper around
Geolocation.watchPosition().
Exposes current coordinates, last update timestamp, and any error as
observables, plus pause() / resume() controls for the underlying
watcher. When immediate is true (default), the watcher is started in
onMount.
useGeolocation();

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Supported: {
const isSupported$: ReadonlyObservable<boolean>
isSupported$.
ImmutableObservableBase<boolean>.get(trackingType?: TrackingType | GetOptions): {}
get() ? "Yes" : "No"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Status: {
const isActive$: ReadonlyObservable<boolean>
isActive$.
ImmutableObservableBase<boolean>.get(trackingType?: TrackingType | GetOptions): {}
get() ? "Tracking" : "Paused"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Latitude: {
const coords$: ReadonlyObservable<UseGeolocationCoords>
Current position coordinates
coords$.
ImmutableObservableBase<UseGeolocationCoords>.get(trackingType?: TrackingType | GetOptions): {}
get().
any
latitude}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Longitude: {
const coords$: ReadonlyObservable<UseGeolocationCoords>
Current position coordinates
coords$.
ImmutableObservableBase<UseGeolocationCoords>.get(trackingType?: TrackingType | GetOptions): {}
get().
any
longitude}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Accuracy: {
const coords$: ReadonlyObservable<UseGeolocationCoords>
Current position coordinates
coords$.
ImmutableObservableBase<UseGeolocationCoords>.get(trackingType?: TrackingType | GetOptions): {}
get().
any
accuracy}m</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      {
const error$: ReadonlyObservable<any>
Last geolocation error
error$.
ImmutableObservableBase<any>.get(trackingType?: TrackingType | GetOptions): any
get() && <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Error: {
const error$: ReadonlyObservable<any>
Last geolocation error
error$.
ImmutableObservableBase<any>.get(trackingType?: TrackingType | GetOptions): any
get()?.
any
message}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>}
      <
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button 
DOMAttributes<HTMLButtonElement>.onClick?: MouseEventHandler<HTMLButtonElement> | undefined
onClick={
const pause: Fn
pause}>Pause</
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
      <
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button 
DOMAttributes<HTMLButtonElement>.onClick?: MouseEventHandler<HTMLButtonElement> | undefined
onClick={
const resume: Fn
resume}>Resume</
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

import { createGeolocation } from "@usels/web";

function LocationTracker() {
  "use scope";
  const { isSupported$, isActive$, coords$, locatedAt$, error$, pause, resume } =
    createGeolocation();

  return (
    <div>
      <p>Supported: {isSupported$.get() ? "Yes" : "No"}</p>
      <p>Status: {isActive$.get() ? "Tracking" : "Paused"}</p>
      <p>Latitude: {coords$.get().latitude}</p>
      <p>Longitude: {coords$.get().longitude}</p>
      <p>Accuracy: {coords$.get().accuracy}m</p>
      {error$.get() && <p>Error: {error$.get()?.message}</p>}
      <button onClick={pause}>Pause</button>
      <button onClick={resume}>Resume</button>
    </div>
  );
}

Deferred Start

// @noErrors
import { useGeolocation } from "@usels/web";

// Don't start watching until explicitly called
const { coords$, resume } = useGeolocation({ immediate: false });
// Later: resume() to start watching

Source

View on GitHub