Skip to content

tkh44/react-geolocation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

25 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

react-geolocation

πŸŒŽπŸ›° Declarative geolocation in React

npm version Build Status codecov

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

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