Demo
Documentation
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 using 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… </div>;
}
}
export default geolocated({
positionOptions: {
enableHighAccuracy: false,
},
})(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,
},
}
The positionOptions
object corresponds to the PositionOptions of the Geolocation API.
Acknowledgements
This project uses the react-component-boilerplate.
License
react-geolocated is available under MIT. See LICENSE for more details.