tkh44 / react-geolocation

🌎🛰 Declarative geolocation for React

react-geolocation

🌎🛰 Declarative geolocation in React

• Install
• 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

react-geolocation's Issues

geolocation in production

Geolocation is not working in aws
.

Watch Location Support

Is it possible to get access to the Geolocation.watchPosition() api in the library?

excuse me ,how could I use the data from the react-geolocation

Hello, I am a react novice. I wonder that how could I use the data from the react-geolocation but not just
display data to the screen.

I am sorry to bother you.
Thank you very much

Basic demo doesn't work in Chrome

• Opened https://l5ylpydyj.codesandbox.io/
• Allowed geolocation
• nothing happens

How access coordinates in lazy's architecture

Hello,

First, i'd like to thank you for sharing this awesome component ! I'm having trouble using the lazy architecture shown in the props section. I don't see how to access coordinates with it. Here what i tried to do :

best regards

How to set latitude and longitude to a state

I need to set a state of location object which contains latitude and longitude of a current location. How can I do that using setState and the latitude and longitude values ?

Unable to get error messages

I tried to get error messages with no luck. When I mock location in Chrome to be "location unavailable" the geolocation component should return an error prop that we could use, but undefined is what we are receiving always.

<GeoLocation
          render={({
            fetchingPosition,
            position: { coords: { latitude, longitude } = {} } = {},
            error,
            getCurrentPosition
          }) =>
            <div className="banner-message">
              <ShowVenue latitude={latitude} longitude={longitude} error={error && error.message}/>
            </div>}
        />

I'm using react developer tools and the ShowVenue component never receives the error prop as is undefined. Any advice?

Basic demo link is broken...