What is the proper way to set options for the <Map> component in the React-Leaflet library?

Question

The React-Leaflet documentation specifies that certain dynamic properties can be set via props. However, there are many other Leaflet properties/methods that are customizable...the caveat being that in order to access them, you need to interact with the Leaflet instance directly (mentioned here in the React-Leaflet docs).

I have not been able to find any examples of how to properly do this, but I did manage to get it to work:

JSFiddle Example

class SimpleExample extends React.Component {

  ...

  componentDidMount(){
    this.L.doubleClickZoom.disable();
    this.L.zoomControl.setPosition('topright');
  }

  render() {
    return <Map ref={(ref) => this.L = ref.getLeafletElement()} />
  }

}

Is this the best way to do this?

Answer 1

You should do this way:

<Map center={position} zoom={this.state.zoom} zoomControl={false} doubleClickZoom={false}>
    <ZoomControl position='topright' />
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
    />
    <Marker position={position}>
      <Popup>
        <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
      </Popup>
    </Marker>
</Map>

https://jsfiddle.net/n4emj929/

Same for other controls