react-geolocation

🌎🛰 Declarative geolocation in React

• Install
• Basic Demo
• Basic Usage
• Props

Install

npm install -S react-geolocation

Basic Usage

<Geolocation
  render={({
    fetchingPosition,
    position: { coords: { latitude, longitude } = {} } = {},
    error,
    getCurrentPosition
  }) =>
    <div>
      <button onClick={getCurrentPosition}>Get Position</button>
      {error &&
        <div>
          {error.message}
        </div>}
      <pre>
        latitude: {latitude}
        longitude: {longitude}
      </pre>
    </div>}
/>

Props

enableHighAccuracy boolean

timeout number

maximumAge number

render function

render is a function that receives an object as its only argument.

The object contains the following keys:

• fetchingPosition: bool
• position: object
• error: object
• getCurrentPosition: function

lazy boolean

If true then the component will not perform the fetch on mount. You must use the getCurrentPosition named argument in order to initiate the request.

<Geolocation 
  lazy 
  render={({getCurrentPosition, fetchingPosition}) => (
    <div>
      <button onClick={getCurrentPosition}>Get Current Position</button>
      <div>Fetching Position: {fetchingPosition}</div>
    </div>
  )}
/> 
// renders "Fetching Position: false" until the button is clicked

onSuccess function

callback called on success. Its only argument is position

• https://developer.mozilla.org/en-US/docs/Web/API/Position

onError function

callback called on error. Its only argument is error

• https://developer.mozilla.org/en-US/docs/Web/API/PositionError