Arbitrary function on react-leaflet marker click

Question

React-leaflet nicely provides the ability to put content within a Popup of a Marker.

For instance in my example:

            <Marker position={[item.lat, item.lng]} key={item.machineid}>
              <Popup maxWidth={720}>
                <ItemGrid machineid={item.machineid}
                          username={this.props.username}/>
              </Popup>
            </Marker>

However if this content is too big, it can be unwieldly, especially on mobile. I would like to have a (bootstrap) Modal interface activate on the click of the Marker. Is there way to do that in react-leaflet?

Answer 1

Update: Evented behavior#

Use the eventHandlers listener function inside the Marker component:

<Marker
  position={[50.5, 30.5]}
  eventHandlers={{
    click: (e) => {
      console.log('marker clicked', e)
    },
  }}
/>