using react-leaflet-editable with react-leaflet 2.8.0

Question

I am integrating/including react-leaflet-editable to my existing project which relies 100% on react-leaflet v2.8.0. I am not able to upgrade at the moment as it requires too much changes to the entire project. Something we cannot afford at the moment. (Why change everything for one when one can change for all. Yes we will probably do this someday but not now)

so here is the code below. it works perfectly with react-leaflet v.3.x but the moment I siwtch to `version 2.8.0' it seizes to work.

What I have tried; Map is renamed to MapContainer in 3.x so I change that but the problem then becomes the whenCreated={setMap} parameter. I need a way to get that linked to the ReactLeafletEditable. or at least I think that is the problem.

I hope I have explained well. the code and link is below.

import React, { useRef } from "react";
import L, { Icon } from "leaflet";
import "leaflet-editable";
import ReactLeafletEditable from "react-leaflet-editable";
import {
  MapContainer,
  TileLayer,
  LayersControl,
  LayerGroup
} from "react-leaflet";
import "leaflet/dist/leaflet.css";

function Demo() {
  const editRef = useRef();
  const [map, setMap] = React.useState();

  const editPolygon = () => {
    editRef.current.startPolygon();
  };

  return (
    <ReactLeafletEditable ref={editRef} map={map}>
      <button onClick={editPolygon} className="editable-btn">
        Create Polygon
      </button>
      <MapContainer
        style={{
          height: "700px",
          backgroundColor: "",
          flexGrow: "1",
          cursor: `10`
        }}
        editable={true}
        zoom={4}
        maxZoom={18}
        center={[35, 105]}
        whenCreated={setMap}
      >
        <LayerGroup>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <TileLayer url="http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />
        </LayerGroup>
      </MapContainer>
    </ReactLeafletEditable>
  );
}

export default Demo;

Link to project in 3.0: https://codesandbox.io/s/react-leaflet-editable-z7tnq?file=/src/App.js

link to react-leaflet-editable : https://www.npmjs.com/package/react-leaflet-editable

PS: You can just switch the react-leaflet version on the side to 2.8.0 see the behavior.

Thank you for all support

Answer 1

Use a ref in combination with a useEffect to get the map instance in react-leaflet v.2.x. With that way you imitate what whenCreated does in version 3.x

const [map, setMap] = React.useState();
const mapRef = useRef();

useEffect(() => {
    if (!mapRef.current) return;

    setMap(mapRef.current.leafletElement);
  }, []);


<ReactLeafletEditable ref={editRef} map={map}>
  <button onClick={editPolygon} className="editable-btn">
    Create Polygon
  </button>
  <Map
   style={{
   height: "700px",
       backgroundColor: "",
       flexGrow: "1",
       cursor: `10`
   }}
   ref={mapRef}
 ...

Demo