Declarative geolocation in React

by React

react-geolocation

Declarative geolocation in React.

View demo Download Source

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

onError function

callback called on error. Its only argument is error

GitHub