react-leaflet-universal

Thin wrapper around [react-leaflet][react-leaflet-url] 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';
`

To forward reference, pass to leafletRef:

`

`

If you do not provide leafletRef, wrappers will instead create their own ref and set the property leafletElement on the instance when it becomes available, so setting a ref prop will still work, however note that since this only occurs late in the render cycle, leafletElement may still be undefined when attempting to access it from the ref, so it is recommended to check that ref.leafletElement exists before attempting to invoke properties or methods on it.

Troubleshooting custom react-leaflet components / render prop support

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

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

`

`

this will also work

`

`

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

`


Note: If you use React 16.2+, [you can also make use of or simply <>][react-16-fragment-example] instead of the wrapping