v2.3.0

.eslintrc.json

@@ -34,8 +34,8 @@
   },
   "settings": {
     "react": {
-      "version": "16.3",
-      "flowVersion": "0.93"
+      "version": "16.8",
+      "flowVersion": "0.98"
     }
   }
 }

CHANGELOG.md

@@ -1,3 +1,11 @@
+## v2.3.0 (2019-05-12)
+
+- Updated Leaflet dependency to v1.5.
+- Updated React dependency to v16.8.
+- Added `useLeaflet` hook ([PR #571](https://github.com/PaulLeCam/react-leaflet/pull/571) by _vadzim_).
+- [website] Added `react-leaflet-google-layer` plugin ([PR #576](https://github.com/PaulLeCam/react-leaflet/pull/576) by _aviklai_).
+- [internal] Replaced deprecated `webpack-serve` library by `webpack-dev-server` to run the examples.
+
 ## v2.2.1 (2019-02-17)
 
 - Fixed passing options in the `LayerGroup` component ([PR #570](https://github.com/PaulLeCam/react-leaflet/pull/570) by _failociraptor_).

UPGRADING.md

@@ -1,8 +1,16 @@
 # Upgrading
 
+## v2.3
+
+This release requires [Leaflet v1.5](https://leafletjs.com/2019/05/08/leaflet-1.5.0.html) and [React v16.8](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) as peer dependencies.
+
+## v2.2
+
+This release requires [Leaflet v1.4](https://leafletjs.com/2018/12/30/leaflet-1.4.0.html) as peer dependency.
+
 ## v2
 
-This release requires [React v16.3.0+](https://reactjs.org/blog/2018/03/29/react-v-16-3.html) and brings breaking changes in the way the necessary context is propagated. Most third-party plugins and custom components will likely need to be updated in order to access the context.
+This release requires [React v16.3](https://reactjs.org/blog/2018/03/29/react-v-16-3.html) and brings breaking changes in the way the necessary context is propagated. Most third-party plugins and custom components will likely need to be updated in order to access the context.
 
 ## v1.8
 
@@ -89,7 +97,7 @@ const CustomComponent = () => {
   return (
     <Map center={[51.51, -0.1]} zoom={10}>
       <TileLayer
-        attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
       />
       <MyMarkersList markers={markers} />

docs/components.md

@@ -69,7 +69,7 @@ Base class extending [`MapEvented`](#mapevented) to add support for panes.
 Base class extending `React.Component` for controls.\
 It exposes a `leafletElement` property to access the `Leaflet` object created for the control.
 
-[🍃 Leaflet Control reference](http://leafletjs.com/reference-1.4.0.html#control) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/MapControl.js)
+[🍃 Leaflet Control reference](http://leafletjs.com/reference-1.5.0.html#control) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/MapControl.js)
 
 ### MapEvented
 
@@ -82,28 +82,28 @@ It exposes a `leafletElement` property to access the `Leaflet` object created fo
 
 Base class extending [`MapComponent`](#mapcomponent), handling adding the layer to the map and removing it when relevant. It exposes the `layerContainer` property, to be used by extending classes to access their containing layer.
 
-[🍃 Leaflet Layer reference](http://leafletjs.com/reference-1.4.0.html#layer) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/MapLayer.js)
+[🍃 Leaflet Layer reference](http://leafletjs.com/reference-1.5.0.html#layer) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/MapLayer.js)
 
 ### Path
 
 Base class extending [`MapLayer`](#maplayer) with the following methods:
 
-- `getPathOptions(object props): object`: filters the input `props` and return a new object of [Path options](http://leafletjs.com/reference-1.4.0.html#path-options) properties.
-- `setStyle(object options = {}): void`: alias to the Leaflet element [`setStyle()`](http://leafletjs.com/reference-1.4.0.html#path-setstyle).
+- `getPathOptions(object props): object`: filters the input `props` and return a new object of [Path options](http://leafletjs.com/reference-1.5.0.html#path-options) properties.
+- `setStyle(object options = {}): void`: alias to the Leaflet element [`setStyle()`](http://leafletjs.com/reference-1.5.0.html#path-setstyle).
 - `setStyleIfChanged(object fromProps, object toProps): void`: extracts the Path options of the two arguments, and calls `setStyle()` with the new options if different from the previous ones.
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#path) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Path.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#path) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Path.js)
 
 ## Map
 
-This is the top-level component that must be mounted for child components to be rendered. Refer to [🍃 Leaflet's documentation](http://leafletjs.com/reference-1.4.0.html#map-options) for more information about the properties.
+This is the top-level component that must be mounted for child components to be rendered. Refer to [🍃 Leaflet's documentation](http://leafletjs.com/reference-1.5.0.html#map-options) for more information about the properties.
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#map) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Map.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#map) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Map.js)
 
 **Dynamic properties**
 
 - `animate: boolean` (optional): If `true`, panning will always be animated if possible. Defaults to `false`.
-- `bounds: bounds` (optional): A rectangle for the map to contain. It will be centered, and the map will zoom in as close as it can while still showing the full bounds. Changes are compared using the [`🍃 equals() method of LatLngBounds`](http://leafletjs.com/reference-1.4.0.html#latlngbounds-equals).
+- `bounds: bounds` (optional): A rectangle for the map to contain. It will be centered, and the map will zoom in as close as it can while still showing the full bounds. Changes are compared using the [`🍃 equals() method of LatLngBounds`](http://leafletjs.com/reference-1.5.0.html#latlngbounds-equals).
 - `boundsOptions: Object` (optional): Options passed to the `fitBounds()` method.
 - `boxZoom: boolean` (optional): If `true`, the map can be zoomed to a rectangular area specified by dragging the mouse while pressing the shift key. Defaults to true.
 - `center: latLng` (optional if `viewport` is provided with a center value): Center of the map. Changes are compared by value, so `[51.0, 0.0]` is considered the same as `{lat: 51, lng: 0}`.
@@ -125,7 +125,7 @@ This is the top-level component that must be mounted for child components to be
 **Other properties**
 
 - `id: string` (optional): The ID of the `<div>` container for the map.
-- `whenReady: () => void` (optional): A function called as soon as the map is ready, see [🍃 Leaflet's documentation](http://leafletjs.com/reference-1.4.0.html#map-whenready) for more information.
+- `whenReady: () => void` (optional): A function called as soon as the map is ready, see [🍃 Leaflet's documentation](http://leafletjs.com/reference-1.5.0.html#map-whenready) for more information.
 
 **Manipulating the viewport**
 
@@ -193,7 +193,7 @@ See the [viewport example](https://github.com/PaulLeCam/react-leaflet/blob/maste
 
 ### Pane
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#map-pane) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Pane.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#map-pane) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Pane.js)
 
 Only children components of the `Pane` component will be added to the corresponding pane. This does not affect the behavior of other Leaflet factories used in these children.
 
@@ -207,7 +207,7 @@ Only children components of the `Pane` component will be added to the correspond
 
 ### Marker
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#marker) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Marker.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#marker) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Marker.js)
 
 **Dynamic properties**
 
@@ -220,7 +220,7 @@ Only children components of the `Pane` component will be added to the correspond
 
 ### Popup
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#popup) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Popup.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#popup) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Popup.js)
 
 **Dynamic properties**
 
@@ -232,7 +232,7 @@ Only children components of the `Pane` component will be added to the correspond
 
 ### Tooltip
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#tooltip) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Tooltip.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#tooltip) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Tooltip.js)
 
 **Dynamic properties**
 
@@ -245,7 +245,7 @@ Only children components of the `Pane` component will be added to the correspond
 
 ### TileLayer
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#tilelayer) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/TileLayer.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#tilelayer) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/TileLayer.js)
 
 **Dynamic properties**
 
@@ -256,7 +256,7 @@ Only children components of the `Pane` component will be added to the correspond
 
 ### WMSTileLayer
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#tilelayer-wms) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/WMSTileLayer.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#tilelayer-wms) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/WMSTileLayer.js)
 
 **Dynamic properties**
 
@@ -267,7 +267,7 @@ Only children components of the `Pane` component will be added to the correspond
 
 ### ImageOverlay
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#imageoverlay) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/ImageOverlay.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#imageoverlay) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/ImageOverlay.js)
 
 **Dynamic properties**
 
@@ -279,7 +279,7 @@ Only children components of the `Pane` component will be added to the correspond
 
 ### VideoOverlay
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#videooverlay) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/VideoOverlay.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#videooverlay) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/VideoOverlay.js)
 
 **Dynamic properties**
 
@@ -293,12 +293,12 @@ Only children components of the `Pane` component will be added to the correspond
 ## Vector Layers
 
 All vector layers extend the [Path component](#path) and therefore accept dynamic
-[🍃 Path options](http://leafletjs.com/reference-1.4.0.html#path-options)
+[🍃 Path options](http://leafletjs.com/reference-1.5.0.html#path-options)
 properties.
 
 ### Circle
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#circle) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Circle.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#circle) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Circle.js)
 
 **Dynamic properties**
 
@@ -308,7 +308,7 @@ properties.
 
 ### CircleMarker
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#circlemarker) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/CircleMarker.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#circlemarker) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/CircleMarker.js)
 
 **Dynamic properties**
 
@@ -318,7 +318,7 @@ properties.
 
 ### Polyline
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#polyline) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Polyline.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#polyline) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Polyline.js)
 
 **Dynamic properties**
 
@@ -327,7 +327,7 @@ properties.
 
 ### Polygon
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#polygon) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Polygon.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#polygon) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Polygon.js)
 
 **Dynamic properties**
 
@@ -336,7 +336,7 @@ properties.
 
 ### Rectangle
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#rectangle) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Rectangle.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#rectangle) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Rectangle.js)
 
 **Dynamic properties**
 
@@ -349,11 +349,11 @@ properties.
 
 Extended [LayerGroup](#layergroup) supporting a [Popup](#popup) child.
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#featuregroup) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/FeatureGroup.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#featuregroup) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/FeatureGroup.js)
 
 ### GeoJSON
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#geojson) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/GeoJSON.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#geojson) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/GeoJSON.js)
 
 **Properties**
 
@@ -366,7 +366,7 @@ Extended [LayerGroup](#layergroup) supporting a [Popup](#popup) child.
 
 ### GridLayer
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#gridlayer) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/GridLayer.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#gridlayer) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/GridLayer.js)
 
 **Dynamic properties**
 
@@ -378,21 +378,21 @@ Extended [LayerGroup](#layergroup) supporting a [Popup](#popup) child.
 
 Use the `LayerGroup` wrapper component to group children layers together.
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#layergroup) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/LayerGroup.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#layergroup) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/LayerGroup.js)
 
 ## Controls
 
 ### AttributionControl
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#control-attribution) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/AttributionControl.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#control-attribution) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/AttributionControl.js)
 
 **Dynamic properties**
 
 - `position: controlPosition` (optional)
 
 ### LayersControl
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#control-layers) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/LayersControl.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#control-layers) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/LayersControl.js)
 
 **Dynamic properties**
 
@@ -460,15 +460,15 @@ Example usage:
 
 ### ScaleControl
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#control-scale) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/ScaleControl.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#control-scale) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/ScaleControl.js)
 
 **Dynamic properties**
 
 - `position: controlPosition` (optional)
 
 ### ZoomControl
 
-[🍃 Leaflet reference](http://leafletjs.com/reference-1.4.0.html#control-zoom) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/ZoomControl.js)
+[🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#control-zoom) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/ZoomControl.js)
 
 **Dynamic properties**
 

docs/context.md

@@ -19,3 +19,5 @@ type LeafletContext = {
 The context provider and consumer are exported as `LeafletProvider` and `LeafletConsumer`, along with a `withLeaflet(Component: ComponentType<*>) => ComponentType<*>` [higher-order component](https://reactjs.org/docs/higher-order-components.html) factory that can be used to wrap [custom components](custom-components.md). This wrapper injects the context as the `leaflet` prop.
 
 All the [controls and layers exported by React-Leaflet](components.md) use this wrapper, your application should only need to use these APIs in specific cases.
+
+Starting with version 2.3, the `useLeaflet()` [hook](https://reactjs.org/docs/hooks-intro.html) can also be used to access the `LeafletContext` object.

docs/custom-components.md

@@ -8,11 +8,10 @@ React-Leaflet aims to provide all the controls and layers provided by Leaflet, b
 The [plugins page](plugins.md) offers a non-exhaustive list of third-party plugins.\
 If these plugins do not match your needs, adding layers and behaviors provided by plugins in your application should be relatively easy by extending one of the **abstract classes** provided by React-Leaflet (see the [class hierarchy](class-hierarchy.md) to find the most relevant class to extend) and implementing the relevant methods:
 
-- `createLeafletElement (props: Object): Object` (mandatory): create and return the relevant Leaflet element instance. this instance will be stored in the class as `this.leafletElement` and used by other methods handling behavior such as events bindings.
+- `createLeafletElement (props: Object): Object` (required): create and return the relevant Leaflet element instance. This instance will be stored in the class as `this.leafletElement` and used by other methods handling behavior such as events bindings.
 - `updateLeafletElement (fromProps: Object, toProps: Object): Object` (optional): use this method to update the `leafletElement` according to the properties changes.
 
-To access [Leaflet context object](context.md) in your custom functional component the `useLeaflet()` [hook](hooks.md) can be used.
-
-By wrapping your custom component using the `withLeaflet()` higher-order component, it will get the [Leaflet context object](context.md) injected in its props.
+By wrapping your custom component using the `withLeaflet()` higher-order component, it will get the [LeafletContext object](context.md) injected in its props.\
+Alternatively, the `useLeaflet()` [hook](https://reactjs.org/docs/hooks-intro.html) can be used to access the context object that needs to be provided as the `leaflet` property of a custom component.
 
 Make sure to read the [introduction page](intro.md) of this documentation to understand what your custom component should use and eventually provide, and check the [class hierarchy](class-hierarchy.md) to see what class to extend.