using Leaflet.GestureHandling with React.Leaflet

[AliBayatpour]

Hi Everybody! First of all thanks a lot for the amazing library. I've searched to find how I can use this library for React Leaflet. I couldn't make it work on React leaflet. I'll be very thankful if someone has any solution for React. leaflet:
my react leaflet version is:
"react-leaflet": "^3.0.5",

Imagine someone is using the map like below as the react-leaflet docs:

<MapContainer center={position} zoom={13} scrollWheelZoom={false}> <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={position}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer>

[nategurian]

@AliBayatpour : Running into the same issue. Wish there was a way to incorporate gesture handling with the MapContainer component.

[nategurian]

@AliBayatpour I just followed this example and got it working with react
#65

Hope that helps!

[kmoskwiak]

Enabling this plugin dynamically with the help of useMap hook worked for me:

import { useMap } from "react-leaflet";
import { GestureHandling } from "leaflet-gesture-handling";
import "leaflet-gesture-handling/dist/leaflet-gesture-handling.css";

export const MapController = () => {
  const map = useMap();
  
  useEffect(() => {
    map.addHandler("gestureHandling", GestureHandling);
    // @ts-expect-error typescript does not see additional handler here
    map.gestureHandling.enable();
  }, [map]);

  return null;
}

Then add MapController somewhere inside <MapContainer />;