how to use react-leaflet-easyprint with react-leaflet 3

Question

react-leaflet-easyprint has examples and docs for react-leaflet v1 and v2.

However, out of the box it seems to be incompatible with v3.

How can i make it work with v3?

Answer 1

This is how i did it.

I used the following packages instead and maybe they will work the same way

// package.json
"leaflet-easyprint": "^2.1.9",
"react-leaflet": "^4.0.0",


// MapPrint.js
import L from 'leaflet';
import 'leaflet-easyprint';
import { useEffect } from 'react';
import { useMap } from 'react-leaflet';


function MapPrint(props) {
  const map = useMap();
  useEffect(() => {
    const control = L.easyPrint({
      ...props
    });
    map.addControl(control)
    return () => {
      map.removeControl(control);
    }
  }, [map]);


  return null;
}

export default MapPrint

after that you could use it like this (inside MapContainer from the new react-leaflet):

<MapContainer zoom={3} >
      <MapPrint position="topleft" sizeModes={['Current', 'A4Portrait', 'A4Landscape']} hideControlContainer={false} title="Print" />
      <MapPrint position="topleft" sizeModes={['Current', 'A4Portrait', 'A4Landscape']} hideControlContainer={false} title="Export as PNG" exportOnly />
</MapContainer>

So what i am saying is to use the js implementation of easyprint instead of using react wrapped version and wrap it by yourself.