React Leaflet v3

[PaulLeCam]

An early (alpha) version of React Leaflet v3 is available on npm using the next tag: yarn add react-leaflet@next.
There is still lots to do in terms of testing and documentation but this first version is working so far to run the basic examples.

Among the major changes are:

• Full rewrite based on React Hooks (no more extending Component)
• Replace Flow by TypeScript for type checking
• Drop IE support (Babel config will only target the "last 2 versions" of browsers)
• Switch to the Hippocratic License
• The Map component is replaced by MapContainer, behaving differently
• Event handlers must be attached using the eventHandlers prop rather than on* props, with a similar change for path options and WMS params
• The react-leaflet package only exposes a public API while a new package, @react-leaflet/core, is used to provide the core APIs
• A new documentation website using Docusaurus v2 with live examples, currently published on react-leaflet-v3.now.sh

During the alpha versions cycle there is likely to be breaking changes between releases, these versions are only meant to be used by early adopters and contributors who want to help identify and fix bugs.

If you want to help with this release please try to convert components using v2 APIs to v3 and open issues for bugs or use cases that can't be implemented.
Please keep in mind the breaking changes from v2 are intentional for better stability and compatibility with React or Leaflet, so things that may work in a certain way in v2 do not necessarily work the same way in v3.
Thanks!

[anajavi]

The "last 2 versions" browserslist config actually includes both IE 10 and IE 11 but not Safari 12:

$ npx browserslist "last 2 versions"                                                                                         (feat/vessel-motionsensor-edit✱) 
and_chr 81
and_ff 68
and_qq 10.4
and_uc 12.12
android 81
baidu 7.12
bb 10
bb 7
chrome 81
chrome 80
edge 81
edge 80
firefox 76
firefox 75
ie 11
ie 10
ie_mob 11
ie_mob 10
ios_saf 13.4
ios_saf 13.3
kaios 2.5
op_mini all
op_mob 46
op_mob 12.1
opera 68
opera 67
safari 13.1
safari 13
samsung 11.1
samsung 10.1

I really don't need IE11 support, but I think the browser support should be somewhat stable between minor releases. This is what I use in an application using react-leaflet:

  "browserslist": [
    "Samsung >= 9.2",
    "Edge >= 18",
    "last 10 Chrome major versions",
    "last 3 iOS major versions and not iOS < 12",
    "last 3 Safari major versions and not Safari < 11.1",
    "last 10 Opera major versions",
    "Firefox ESR"
  ],

[PaulLeCam]

beta 1 released with updated docs: https://react-leaflet-v3.now.sh/

[Lorthiz]

Hey it looks... Cool! 👍
One question in examples section I can't see customization using 'className' or 'styles' is it available in this version? Or it is not available because of Leaflet?

[PaulLeCam]

Yes they are supported on the MapContainer component, as described in the docs: https://react-leaflet-v3.now.sh/docs/api-map#mapcontainer

[Lorthiz]

Sorry I forgot to add 'I can't see customization using 'className' or 'styles' on Marker element` :)
Only thing I found so far is Icon property 'className':

        icon={new Icon({
            iconUrl: MiscUtils.getIconUrl(props.markerInfo.iconUrl),
            // iconSize: [32, 32],
            iconSize: [128, 128],
            popupAnchor: [0, -12],
            className: props.isSelected ? "test" : "normal"
        })}

[PaulLeCam]

Props that don't match options supported by Leaflet are not supported, no.

[Ravelonarivo]

Hi!
Will react-leaflt v3 fix the LayersControl name bug when it should change dynamically?
https://stackoverflow.com/questions/59695520/react-leaflet-layerscontrol-dont-change-name-dynamically

[PaulLeCam]

Please don't hijack this thread with off-topic questions.
What you're asking @Ravelonarivo is the expected beahvior and not a bug, the name prop on LayersControl is not mutable.