Features
- Customizable — the configuration exposes all the options of Geolocation API
- Lightweight — the minified version has only 5 kB in size
- Supports TypeScript — the typings are included in the project
Browser support
Chrome ≥ 5 | Firefox ≥ 3.5 | Internet Explorer ≥ 9 | Opera ≥ 10.60 | Safari ≥ 5 |
---|---|---|---|---|
![]() | ![]() | ![]() | ![]() | ![]() |
How to get it
It's on npm, just do
npm install react-geolocated
How to use it
It is a React Higher–Order Component that injects geolocation–related props in any component passed to it.
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,
},
userDecisionTimeout: 5000
})(Demo);
For the complete API documentation and more, please see the README.