Htykuut

Is there anyway to avoid autoClose property on Popup component?
I would like something like this, but autoClose prop does not exist in react-leaflet.

<Marker position={coords}>

  <Popup autoClose={false}>

    Some text

  </Popup>

</Marker>

Indeed, a few Leaflet Popup options are not exposed via Popup component props in react-leaflet library.

The following solution could be considered to assign those properties:

Introduce a callback function to access Leaflet Popup via popup.leafletElement:

<Popup ref={popupEl => this.assignPopupProperties(popupEl)}>

        Melbourne

</Popup>

and then update directly Leaflet Popup options:

assignPopupProperties(popup) {

   popup.leafletElement.options.autoClose = false;

   popup.leafletElement.options.closeOnClick = false;

}

Here is a demo and a source code

I found the way to do it. You hove to set both properties autoClose and closePopupOnClick:

<Map center={position} zoom="12" closePopupOnClick={false}>

  <Marker position={coords}>

    <Popup autoClose={false}>

      I'm a popup

    </Popup>

  </Marker>

</Map>