Store a reference to the map element? about gatsby-starter-leaflet

[colbyfayock]

hey @biomiker I should probably build this into the component, but are you familiar with the forwardRef pattern?

https://reactjs.org/docs/forwarding-refs.html

If you set that up, you'll be able to create the ref in the IndexPage, and pass that ref just like you would on a native react component, and use that for the map. So something along the lines of:

const IndexPage = () => {
  const mapRef = createRef();
  ...
  <Map ref={mapRef}

then inside the Map component

const Map = React.forwardRef((props, ref) => (
  ...
  <BaseMap ref={ref}

does that help?

[colbyfayock]

Labeling for someone to pick up (if not me at some point). We should apply the update above to the starter itself

[biomiker]

OK after a few hiccups I did get this working, thanks! The wrinkles for me were:

1. Inside the Map component I also had to eliminate mapRef and change mapRef to ref inside the useRefEffect hook.
2. To access the actual leaflet map in the IndexPage, I need to use mapRef.current.leafletElement

Is #2 expected?

[colbyfayock]

yup that's expected, glad you were able to figure it out

that's how React Leaflet is storing it and making it available

feel free to make a PR if you're interested to add the ForwardRef functionality :)

[biomiker]

I think I could possibly manage that. :) Would it be a breaking change -- as the ref would become a different component?

[colbyfayock]

i dont think it would be breaking - since the way the Starter works is it spins up an entire new project with a new git history, it won't be like someone using a library trying to pull it in

additionally, we can set up the ref so that we have a "backup" in case someone doesn't explicitly pass one in

for instance:

const Map = ( props ) => {
  const { ...otherprops, ref ...restOfProps } = props;

  const backupRef = useRef();
  const mapRef = ref || backupRef;

if we do that, there will always be a ref available, but then it allows someone to pass in their own

[biomiker]

Good point. I'll try integrating this backupRef next week and check in a PR if it works. Thanks!!!

[colbyfayock]

this was added but it's moot at this point as react-leaflet v3 took away the abillity to use a ref on the Map component