I’m new in React and I would use the hook useGeolocation but it’s refresh all the times. So I isolate this hook in a component Location but I can’t access to the position of the user and send to my component MapWrapper to center the map.
import { useGeolocation } from "@uidotdev/usehooks";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertCircle } from "lucide-react"
import { MapWrapper } from "../mapWrapper";
import React, { forwardRef, useEffect, useRef } from "react";
export const Home = () => {
const refLatLong = useRef()
useEffect(() => {
console.log(refLatLong.current?.getAttribute('position'))
}, []);
return (
<>
<Location ref={refLatLong} />
<MapWrapper position={refLatLong.current} />
</>
)
}
const Location = forwardRef((props, ref) => {
const location = useGeolocation();
if (location.loading) {
return <>
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Chargement...</AlertTitle>
<AlertDescription>
Vous devez accepter la géolocalisation
</AlertDescription>
</Alert>
</>
}
if (location.error) {
return <>
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Chargement...</AlertTitle>
<AlertDescription>
Activer les autorisations pour accéder à vos données de localisation
</AlertDescription>
</Alert>
</>
}
return <div ref={ref} id="user-position" position={[location.latitude, location.longitude]}></div>
})
Could you tell me what is my error with the ref and if it’s the good solution.
Thanks a lot