@reacthooks.org/use-watch-position

✴ Project Homepage ✴

✴ Docs ✴

✴ Demo ✴
✴ Usage ✴
✴ Examples ✴

Install

$ npm install @reacthooks.org/use-watch-position

useWatchPosition

A React Hook (using useEffect) which uses the Geolocation API, specifically navigator.geolocation.watchPosition().

Synopsis

In your React component:

import { useState } from 'react'
import useSetTimeout from "use-set-timeout"

function SetTimeout() {
  const [ position, setPosition ] = useState(false)

  useWatchPosition((err, newPosition) => {
    if (err) {
      // either the user refused access, or something bad happened
      // * err.code === 1 // Permission Denied
      // * err.code === 2 // Position Unavailable
      // * err.code === 3 // Timeout
      // * no err.code    // some other error!
    }
    setPosition(newPosition)
  })

  return (
    <p>latitude = { position && position.coords && position.coords.latitude }</p>
    <p>longitude = { position && position.coords && position.coords.logitude }</p>
  )
}

Other Hooks

Please see all of the other reacthooks.org hooks:

• use-document-title - Change the document.title
• use-resize - Subscribe to Window 'resize' events and get the width and height
• use-window-width - Subscribe to Window 'resize' events and get the width
• use-online - Get online/offline status
• use-match-media - Get whether a media query is matched
  • .usePrefersColorScheme() - Get whether the user prefers the 'light' or 'dark' color scheme
• use-set-timeout - use and automatically clear a setTimeout()
• use-set-interval - use and automatically clear a setInterval()
• use-orientation-change - get Device Orientation updates
• use-session-storage - gets and sets a key in window.sessionStorage
• use-local-storage - gets and sets a key in window.localStorage
• use-form-validation - helps manage form values, validation, and errors
• use-watch-position - get the user's location using the Geolocation API

Author

$ npx chilts

   ╒════════════════════════════════════════════════════╕
   │                                                    │
   │   Andrew Chilton (Personal)                        │
   │   -------------------------                        │
   │                                                    │
   │          Email : [e-mail]             │
   │            Web : https://chilts.org                │
   │        Twitter : https://twitter.com/andychilton   │
   │         GitHub : https://github.com/chilts         │
   │         GitLab : https://gitlab.org/chilts         │
   │                                                    │
   │   Apps Attic Ltd (My Company)                      │
   │   ---------------------------                      │
   │                                                    │
   │          Email : [e-mail]              │
   │            Web : https://appsattic.com             │
   │        Twitter : https://twitter.com/AppsAttic     │
   │         GitLab : https://gitlab.com/appsattic      │
   │                                                    │
   │   Node.js / npm                                    │
   │   -------------                                    │
   │                                                    │
   │        Profile : https://www.npmjs.com/~chilts     │
   │           Card : $ npx chilts                      │
   │                                                    │
   ╘════════════════════════════════════════════════════╛

(Ends)