how to implement with react Leaflet ?

[yjarid]

I am very intrested on your pluggin, however I am strugling to how to implement it with react leaflet

[hexadeciman]

1. install with npm i --save leaflet-responsive-popup
2. add the import on top of your file import R from "leaflet-responsive-popup";
3. you might need to declare a file externalModules.d.ts and declare the module:

declare module "leaflet-responsive-popup" {
	export = responsivePopup;
}

4. then here's a snippet of how to use it in React:

const leaflet = useLeaflet();
R.responsivePopup({
  autoPanPadding: [0, 0],
  hastip: false,
  offset: [0, 5],
  maxWidth: 500,
  closeButton: false,
  closeOnClick: false,
  autoPan: false,
})
.setLatLng({ lat: 0, lng: 0 })
.setContent("Hello World")
.openOn(leaflet.map);

You can wrap that in a component and decide to use it or not.