slutske22 / react-esri-leaflet

react components for esri-leaflet
https://codesandbox.io/s/github/slutske22/react-esri-leaflet/tree/master/examples/ts
MIT License
37 stars 5 forks source link

Cannot useRef with functional components #8

Closed kevinkdarling closed 3 years ago

kevinkdarling commented 3 years ago

First, thanks for the library. One of the examples shows a useRef to get a handle to a layer. However, when I tried that with DynamicLayer so that I could trigger an Identify task later, React of course complained that I could not use refs with such a component.

Am I missing something? Thanks for any help. If this is the wrong venue for such a question, please direct to the right spot. Thank you.

slutske22 commented 3 years ago

Wow I guess I never tested the refs before. You're right, this is a problem. I need to wrap the underlying EsriLeafletLayer in a forwardRef call to get this working, or make it a class component. I'll try to fix this as soon as I can. Currently, a crappy workaround is to do this:

import { EsriLeafletLayer } from "react-esri-leaflet";

const Map = () => {
  var dynamicMapLayerRef = React.useRef();

  return (
    <MapContainer ... >=
      <EsriLeafletLayer
        layerType="dynamicMapLayer"
        ref={dynamicMapLayerRef}
        url="your_layer_url"
      />
    </MapContainer>
  );
};

Here's a working example of that. Right this moment it seems that dynamic map layer url is not working on the arcgis side, but the ref to the layer is still working.

I'll get working on fixing this for real hopefully within the next few days.

slutske22 commented 3 years ago

This is fixed now. Upgrade to 1.3.0 and you should be able to use refs normally as described in the docs. The examples also now have working examples of using refs (check out the <FeatureLayer /> component in either example folder). Let me know if you have any more issues with this.

kevinkdarling commented 3 years ago

Just wanted to thank you very much for the fix! You saved our project.