Declarative geolocation in React Sample in 2020

Declarative geolocation in React Sample in 2020


tutorials -

react-geolocation

Declarative geolocation in React.

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

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff