/Javascript/React/Get location from brwoser react

Get location from brwoser react

npm install react-geolocated --save

Source: npmjs.com

Get location from brwoser react

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);

Source: npmjs.com

Similar codes

0 vote289 views1 answer
Add active class to button onclick react
Javascript React
0 vote305 views1 answer
Reactstrap search bar
Javascript React
0 vote270 views1 answer
React receiving socket muitple times
Javascript React
0 vote282 views1 answer
Truncate function react
Javascript React
1 vote265 views1 answer
React native could not get batchedbridge
Javascript React
1 vote265 views1 answer
Adding media queries in makeStyle material react
Javascript React
0 vote262 views1 answer
React 10 to 1 with step -2 (odd numbers between [1..10] inverted order)
Javascript React
0 vote264 views1 answer
Placeholder text disappear when click in react
Javascript React
1 vote307 views1 answer
Java.lang.outofmemoryerror (no error message) react native
Javascript React
1 vote253 views1 answer
React best way of forcing component to update
Javascript React