jessp/react-leaflet-universal

Painlessly use react-mapbox in universal apps

react-leaflet-universal

Thin wrapper around react-leaflet that is designed to make it easier to implement the module in universal applications. Leaflet was not designed with the server in mind, making it very difficult to work with for server-side rendering.

To sidestep this issue, we simply don't render server side. This module wraps all of react-leaflet's components in a Wrapper class that only renders when the component is mounted - which only happens client-side.

usage

Just use it as you normally would use react-leaflet. e.g. Instead of

import { Map } from 'react-leaflet';

write

import { Map } from 'react-leaflet-universal';

Troubleshooting custom react-leaflet components / render prop support

Some components, such as react-leaflet-markercluster, make use of componentWillMount and so cannot be used directly.

To mitigate this, you can now use a function render prop instead of normal children for a component. Thus, instead of e.g.

<Map>
  <TileLayer ... />
</Map>

this will also work

<Map>
  () => {
    return <TileLayer ... />
  }
</Map>

So in the case of react-leaflet-markercluster, you can write something similar to:

<Map>
  () => {
    const MarkerClusterGroup = require('react-leaflet-markercluster').default;
    return (
      <div>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <MarkerClusterGroup
          markers={[
            { position: [49.8397, 24.0297] },
            { position: [52.2297, 21.0122] },
            { position: [51.5074, -0.0901] },
          ]}
        />
      </div>
    );
  }
 </Map>

(contrast with the example on the react-leaflet-markercluster website)

Note: If you use React 16.2+, you can also make use of <Fragment></Fragment> or simply <></> instead of the wrapping <div> in the example above.