How to use MapContext.Provider

[martpet]

Hello, I need help with the second example at https://visgl.github.io/react-map-gl/docs/api-reference/map-context.

I'm trying to use <MapContext.Provider> as shown in the example but I get a typescript error: "Property 'value' is missing in type '{ children: Element; }' but required in type 'ProviderProps'".

Do I have to pass something in the value prop? I was hoping that the map would somehow update the value of the MapContext.Provider.

[sangdth]

I struggled with this recently. This is what I have done:

From outside, I made the ref for the map

  const mapRef = createRef<MapRef>();

  const mapContextValue: MapContextProps = {
    map: mapRef,
    container: null,
    isDragging: false,
    eventManager: undefined,
  };

  return (
    <MapContext.Provider value={mapContextValue}>
      ...
      <MapViewComponent />
      ...
    <MapContext.Provider>
   ...

Then in MapViewComponent I use forwardRef to put it into the ReactMapGL

<ReactMapGL ref={forwardedRef} ...>
   ...
</ReactMapGL>

So far the typescript stops complaining, but I DON'T KNOW is that correct way or not. I can't believe I can't find an example about this on github and/or google.

Really appreciate if we can get more insightful comments from people have more experience on this.