{"action":"created","issue":{"url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/488","repository_url":"https://api.github.com/repos/PaulLeCam/react-leaflet","labels_url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/488/labels{/name}","comments_url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/488/comments","events_url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/488/events","html_url":"https://github.com/PaulLeCam/react-leaflet/issues/488","id":332491988,"node_id":"MDU6SXNzdWUzMzI0OTE5ODg=","number":488,"title":"Third party plugins cannot extend components that use forwardRef","user":{"login":"sanfilippopablo","id":1562004,"node_id":"MDQ6VXNlcjE1NjIwMDQ=","avatar_url":"https://avatars0.githubusercontent.com/u/1562004?v=4","gravatar_id":"","url":"https://api.github.com/users/sanfilippopablo","html_url":"https://github.com/sanfilippopablo","followers_url":"https://api.github.com/users/sanfilippopablo/followers","following_url":"https://api.github.com/users/sanfilippopablo/following{/other_user}","gists_url":"https://api.github.com/users/sanfilippopablo/gists{/gist_id}","starred_url":"https://api.github.com/users/sanfilippopablo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sanfilippopablo/subscriptions","organizations_url":"https://api.github.com/users/sanfilippopablo/orgs","repos_url":"https://api.github.com/users/sanfilippopablo/repos","events_url":"https://api.github.com/users/sanfilippopablo/events{/privacy}","received_events_url":"https://api.github.com/users/sanfilippopablo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-06-14T17:18:26Z","updated_at":"2018-06-15T21:16:00Z","closed_at":null,"author_association":"NONE","body":"- [x] All peer dependencies are installed: React, ReactDOM and Leaflet.\r\n- [x] Using a supported version of React and ReactDOM (v16.3.0 minimum).\r\n- [x] Using the supported version of Leaflet (v1.3.x) and its corresponding CSS file is loaded.\r\n- [x] Using the [latest v2 RC version of React-Leaflet](https://github.com/PaulLeCam/react-leaflet/releases) - **not v1**.\r\n- [x] The issue has not already been reported.\r\n- [x] Make sure you have followed the [quick start guide](http://leafletjs.com/examples/quick-start.html) for Leaflet.\r\n- [x] Make sure you have fully read the [documentation](https://react-leaflet.js.org/docs/en/intro.html) and that you understand the [limitations](https://react-leaflet.js.org/docs/en/intro.html#limitations).\r\n\r\n### Expected behavior\r\nThird party plugins are supposed to extend from existing classes (components) in the react-leaflet class hierarchy. That's how most react-leaflet plugins work right now.\r\n\r\n### Actual behavior\r\n The problem is that due `React.forwardRef` not returning a function (like normal React components) but an object, [the check babel does](https://github.com/babel/babel/blob/8ab4a5df433accf65a127dfe357dae8ffd6f498b/packages/babel/src/transformation/templates/helper-inherits.js#L2) to make sure a class is extensible fails. That means that every third party plugin extending a react-leaflet component that uses `React.forwardRef` fails.\r\n\r\n### Steps to reproduce\r\n[Here's a simple codepen](https://codepen.io/anon/pen/vrJraP?editors=1111) reproducing the issue."},"comment":{"url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/comments/397744353","html_url":"https://github.com/PaulLeCam/react-leaflet/issues/488#issuecomment-397744353","issue_url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/488","id":397744353,"node_id":"MDEyOklzc3VlQ29tbWVudDM5Nzc0NDM1Mw==","user":{"login":"sanfilippopablo","id":1562004,"node_id":"MDQ6VXNlcjE1NjIwMDQ=","avatar_url":"https://avatars0.githubusercontent.com/u/1562004?v=4","gravatar_id":"","url":"https://api.github.com/users/sanfilippopablo","html_url":"https://github.com/sanfilippopablo","followers_url":"https://api.github.com/users/sanfilippopablo/followers","following_url":"https://api.github.com/users/sanfilippopablo/following{/other_user}","gists_url":"https://api.github.com/users/sanfilippopablo/gists{/gist_id}","starred_url":"https://api.github.com/users/sanfilippopablo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sanfilippopablo/subscriptions","organizations_url":"https://api.github.com/users/sanfilippopablo/orgs","repos_url":"https://api.github.com/users/sanfilippopablo/repos","events_url":"https://api.github.com/users/sanfilippopablo/events{/privacy}","received_events_url":"https://api.github.com/users/sanfilippopablo/received_events","type":"User","site_admin":false},"created_at":"2018-06-15T21:16:00Z","updated_at":"2018-06-15T21:16:00Z","author_association":"NONE","body":"OK, sure. But let's say I want to extend the `GeoJSON` to have all its current functionality and a little more. For example, to reload the layer if the `data` prop changes. I could extend `GeoJSON` and add this method:\r\n```es6\r\nupdateLeafletElement(fromProps, toProps) {\r\n    super.updateLeafletElement(fromProps, toProps);\r\n    if (!isEqual(fromProps.data, toProps.data)) {\r\n      this.leafletElement.clearLayers();\r\n      this.leafletElement.addData(toProps.data);\r\n    }\r\n  }\r\n```\r\nBut I can't extend `GeoJSON`, because the only export already uses forwardRef. What if we added a named export [here](https://github.com/PaulLeCam/react-leaflet/blob/master/src/GeoJSON.js#L23). Then I can extend it and use `withLeaflet` in my component."}}
{"actor":{"display_login":"sanfilippopablo"}}