How to know when a react-leaflet popup is closed

Question

I have a 'leaflet-react' map, with some markers. When a marker is clicked, a popup opens. When you click away or close the popup, I need to know when is's closed so I can tell if it's open.

the marker generation looks like the code below. Marker and Popup come from 'react-leaflet', SiteForm is my code.

var markers = this.props.sites.map((item, i) => {
  <Marker icon={icon}  key={i} position={{ lng: co[0], lat: co[1] }}>
    <Popup> 
        <SiteForm item={item} />
    </Popup>
  </Marker> 
}

in componentDidMount in Siteform I can tell when a popup is opened, but componentWillUnmount isn't triggered when you close the popup.

I've tried extending Marker, but thats bad practise and also I couldn't extend from the Marker Symbol. I've also tried wrapping Popup in a component but componentDidMount runs on every marker when the page loads not popup open.

You can provide the optional property onClose: () => void to your popup or marker — FortyTwo
Adding onClose={this.closePopup} to either <Popup> or <Marker> doesn't call the function this.closePopup — psykx

Vadim Gremyachev Vadim Gremyachev · Accepted Answer · 2019-03-23T10:54:58

Layer.popupclose event could be utilized for that matter, which

Fired when a popup bound to this layer is closed

In case of react-leaflet library popupclose event could be attached to Map component like this:

const MapComponent = props => {
  const { zoom, center } = props;

  const handlePopupClose = (e) => {
    console.log(e.popup)
  }


  return (
    <div>
      <Map center={center} zoom={zoom} onPopupClose={handlePopupClose}>
        <TileLayer url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"  />
        <Marker  position={center}>
          <Popup>
            <div>Australia</div>
          </Popup>
        </Marker>
      </Map>
    </div>
  );
}

Demo

How to know when a react-leaflet popup is closed

1 Answers