Skip to content
React Higher-Order Component for using Geolocation API
Branch: master
Clone or download
no23reason Merge pull request #208 from no23reason/features/demo-show-error
fix: make demo show positionError if needed
Latest commit 1b8c95c Jan 29, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo fix: make demo show positionError if needed Jan 29, 2019
docs style: add prettier and pretty-quick Mar 25, 2018
src feat: add onError and onSuccess callbacks May 6, 2018
tests
.babelrc
.editorconfig
.eslintrc.json
.gitattributes
.gitignore test(typings): simplify .d.ts file testing Mar 25, 2018
.npmignore fix: remove unnecessary files from distributed package Nov 20, 2016
.prettierrc
.travis.yml
CHANGELOG.md docs(changelog): update CHANGELOG.md to point to Releases page Nov 20, 2016
CONTRIBUTING.md fix markdown formatting for links for CONTRIBUTING.md Oct 17, 2017
LICENSE intial commit of the adapted boilerplate Jul 3, 2016
README.md
index.d.ts feat: add onError and onSuccess callbacks May 6, 2018
package.json
yarn.lock chore(packages): upgrade @types/react Oct 12, 2018

README.md

build status codecov npm version Commitizen friendly semantic-release Greenkeeper badge

react-geolocated - React.js Higher-Order Component for using Geolocation API

Demo

Basic demo can be found at the demo page.

Basic Usage

Install using npm:

npm install react-geolocated --save

Then use in your application like this:

import React from 'react';
import {geolocated} from 'react-geolocated';

class Demo extends React.Component {
  render() {
    return !this.props.isGeolocationAvailable
      ? <div>Your browser does not support Geolocation</div>
      : !this.props.isGeolocationEnabled
        ? <div>Geolocation is not enabled</div>
        : this.props.coords
          ? <table>
            <tbody>
              <tr><td>latitude</td><td>{this.props.coords.latitude}</td></tr>
              <tr><td>longitude</td><td>{this.props.coords.longitude}</td></tr>
              <tr><td>altitude</td><td>{this.props.coords.altitude}</td></tr>
              <tr><td>heading</td><td>{this.props.coords.heading}</td></tr>
              <tr><td>speed</td><td>{this.props.coords.speed}</td></tr>
            </tbody>
          </table>
          : <div>Getting the location data&hellip; </div>;
  }
}

export default geolocated({
  positionOptions: {
    enableHighAccuracy: false,
  },
  userDecisionTimeout: 5000,
})(Demo);

Props

The props passed to the wrapped component are:

{
    coords: {
        latitude,
        longitude,
        altitude,
        accuracy,
        altitudeAccuracy,
        heading,
        speed,
    },
    isGeolocationAvailable, // boolean flag indicating that the browser supports the Geolocation API
    isGeolocationEnabled, // boolean flag indicating that the user has allowed the use of the Geolocation API
    positionError, // object with the error returned from the Geolocation API call
}

The coords prop is equivalent to the Coordinates object and the positionError is equivalent to the PositionError.

Additional props the resulting component can take:

{
  // callback call on Geolocation API error, takes PositionError as the only argument
  onError,
  // callback call on Geolocation API success, takes Position as the only argument  
  onSuccess,
}

PropTypes

Unfortunately, the geolocated HOC cannot add the prop types to the wrapped component directly, as the ESLint will not pick that up. For this reason, prop types are exported as the geoPropTypes object. Using them is simple with Object.assign (or if you already depend on it, lodash merge function is useful as well), or, if your environment supports it, using the object spread syntax:

import React from 'react';
import {geolocated, geoPropTypes} from 'react-geolocated';

class Demo extends React.Component {
  // Same as the basic example
}

// Using Object.assign
Demo.propTypes = Object.assign({}, Demo.propTypes, geoPropTypes);
// Using ES6 object spread syntax
Demo.propTypes = {...Demo.propTypes, ...geoPropTypes};

export default geolocated()(Demo);

Configuration

The geolocated function takes optional configuration parameter:

{
    positionOptions: {
        enableHighAccuracy: true,
        maximumAge: 0,
        timeout: Infinity,
    },
    watchPosition: false,
    userDecisionTimeout: null,
    suppressLocationOnMount: false,
    geolocationProvider: navigator.geolocation
}

The positionOptions object corresponds to the PositionOptions of the Geolocation API.

By default the component only sets position once. To watch the user's position and provide live updates to position, set watchPosition = true. The geolocation event handler is unregistered when the component unmounts.

If set, the userDecisionTimeout determines how much time (in miliseconds) we give the user to make the decision whether to allow to share their location or not. In Firefox, if the user declines to use their location, the Geolocation API call does not end with an error. Therefore we want to fallback to the error state if the user declines and the API does not tell us.

The location is obtained when the component mounts by default. If you want to prevent this and get the location later, set the suppressLocationOnMount to true and using a ref in the parent component call its getLocation method (see the demo's App component for example of this).

The geolocationProvider allows to specify alternative source of the geolocation API. This was added mainly for testing purposes, however feel free to use it if need be.

TypeScript

This project ships with type definitions for TypeScript provided. You can use them in your TypeScript files like this:

import * as React from 'react';
import { GeolocatedProps, geolocated } from 'react-geolocated';

interface IDemoProps {
  label: string;
}

class Demo extends React.Component<IDemoProps & GeolocatedProps> {
  render(): JSX.Element {
    return (
      <div>
        label: {this.props.label}
        lattitude: {this.props.coords && this.props.coords.latitude}
      </div>
    );
  }
}

export default geolocated()(Demo);

Browser support

  • Chrome ≥ 5
  • Firefox ≥ 3.5
  • Internet Explorer ≥ 9
  • Opera ≥ 10.60
  • Safari ≥ 5

Acknowledgements

Many thanks belong to @mcumpl for the original idea for this as well as many suggestions and comments.

This project uses the react-component-boilerplate.

License

react-geolocated is available under MIT. See LICENSE for more details.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.