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:

` <TileLayer attribution='© OpenStreetMap contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

A pretty CSS3 popup.
Easily customizable.

`

[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 https://github.com/elmarquis/Leaflet.GestureHandling/issues/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 />;