Package Exports

react-geolocated

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-geolocated) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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,
    },
    userDecisionTimeout: null,
    geolocationProvider: navigator.geolocation
}

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

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 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 extends GeolocatedProps {}

class Demo extends React.Component<IDemoProps, {}> {
  render(): React.ReactElement<{}> {
    return <div>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 and browser-icons.

License

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