Support react-leaflet v3.0

Signed-off-by: Mark Ison <mark@codecutter.uk>

package.json

@@ -48,14 +48,15 @@
     "terser": "^4.6.10"
   },
   "dependencies": {
+    "@react-leaflet/core": "^1.0.2",
     "leaflet": "^1.6.0",
     "leaflet.markercluster": "^1.4.1",
-    "react-leaflet": "^2.6.3"
+    "react-leaflet": "^3.0.0"
   },
   "peerDependencies": {
     "leaflet": "^1.6.0",
     "leaflet.markercluster": "^1.4.1",
-    "react-leaflet": "^2.6.3"
+    "react-leaflet": "^3.0.0"
   },
   "husky": {
     "hooks": {

src/react-leaflet-markercluster.js

@@ -1,34 +1,34 @@
-import { MapLayer, withLeaflet } from 'react-leaflet';
+import { createPathComponent } from '@react-leaflet/core';
 import L from 'leaflet';
 
 require('leaflet.markercluster');
 
-class MarkerClusterGroup extends MapLayer {
-  createLeafletElement({ children, leaflet: { map }, ...props }) {
-    const clusterProps = {};
-    const clusterEvents = {};
+const MarkerClusterGroup = createPathComponent((
+  { children: _c, ...props },
+  ctx
+) => {
+  const clusterProps = {};
+  const clusterEvents = {};
 
-    // Splitting props and events to different objects
-    Object.entries(props).forEach(
-      ([propName, prop]) => propName.startsWith('on')
-        ? clusterEvents[propName] = prop
-        : clusterProps[propName] = prop
-    );
+  // Splitting props and events to different objects
+  Object.entries(props).forEach(
+    ([propName, prop]) => propName.startsWith('on')
+      ? clusterEvents[propName] = prop
+      : clusterProps[propName] = prop
+  );
 
-    // Creating markerClusterGroup Leaflet element
-    const markerClusterGroup = new L.markerClusterGroup(clusterProps);
-    this.contextValue = { layerContainer: markerClusterGroup, map };
+  // Creating markerClusterGroup Leaflet element
+  const markerClusterGroup = new L.markerClusterGroup(clusterProps);
 
-    // Initializing event listeners
-    Object.entries(clusterEvents).forEach(
-      ([eventAsProp, callback]) => {
-        const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`;
-        markerClusterGroup.on(clusterEvent, callback);
-      },
-    );
+  // Initializing event listeners
+  Object.entries(clusterEvents).forEach(
+    ([eventAsProp, callback]) => {
+      const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`;
+      markerClusterGroup.on(clusterEvent, callback);
+    },
+  );
 
-    return markerClusterGroup;
-  }
-}
+  return { instance: markerClusterGroup, context: { ...ctx, layerContainer: markerClusterGroup } };
+});
 
-export default withLeaflet(MarkerClusterGroup);
+export default MarkerClusterGroup;