Looking for feedback on this Datalayer component, curious if this is something you would like to add.

[sargtier1]

I used the polygon example for reference.

import { useMap } from '@vis.gl/react-google-maps';
import { type Ref, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';

type DataLayerEventProps = {
  onClick?: (e: google.maps.Data.MouseEvent) => void;
  onDrag?: (e: google.maps.Data.MouseEvent) => void;
  onDragStart?: (e: google.maps.Data.MouseEvent) => void;
  onDragEnd?: (e: google.maps.Data.MouseEvent) => void;
  onMouseOver?: (e: google.maps.Data.MouseEvent) => void;
  onMouseOut?: (e: google.maps.Data.MouseEvent) => void;
  onRightClick?: (e: google.maps.Data.MouseEvent) => void;
};

interface DataLayerCustomProps {
  geojson: any;
  style?: google.maps.Data.StylingFunction | google.maps.Data.StyleOptions;
  title?: string;
}

export type DataLayerProps = Partial<google.maps.Data.DataOptions> &
  DataLayerEventProps &
  DataLayerCustomProps;

export type DatalayerRef = Ref<google.maps.Data | null>;

export const useDataLayer = (props: DataLayerProps) => {
  const {
    style,
    geojson,
    onClick,
    onDrag,
    onDragStart,
    onDragEnd,
    onMouseOver,
    onMouseOut,
    onRightClick,
    // ...dataLayerOptions
  } = props;

  const callbacks = useRef<Record<string, (e: unknown) => void>>({});
  Object.assign(callbacks.current, {
    onClick,
    onDrag,
    onDragStart,
    onDragEnd,
    onMouseOver,
    onMouseOut,
    onRightClick,
  });

  const map = useMap();

  const datalayer = useRef(new google.maps.Data()).current;

  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
  useEffect(() => {
    if (!map) return;

    datalayer.setMap(map);
    datalayer.addGeoJson(geojson);

    return () => {
      datalayer.setMap(null);
    };
  }, [map]);

  useMemo(() => {
    datalayer.setStyle(style ?? {});
  }, [style, datalayer.setStyle]);

  useEffect(() => {
    if (!datalayer) return;
    const gme = google.maps.event;

    // Standard events
    // biome-ignore lint/complexity/noForEach: <explanation>
    [
      ['click', 'onClick'],
      ['drag', 'onDrag'],
      ['dragstart', 'onDragStart'],
      ['dragend', 'onDragEnd'],
      ['mouseover', 'onMouseOver'],
      ['mouseout', 'onMouseOut'],
    ].forEach(([eventName, eventCallback]) => {
      gme.addListener(datalayer, eventName, (e: google.maps.Data.MouseEvent) => {
        const callback = callbacks.current[eventCallback];
        if (callback) callback(e);
      });
    });

    // Cross-platform right click support
    // Listen for both rightclick and contextmenu events
    // biome-ignore lint/complexity/noForEach: <explanation>
    ['rightclick', 'contextmenu'].forEach((eventName) => {
      gme.addListener(datalayer, eventName, (e: google.maps.Data.MouseEvent) => {
        const callback = callbacks.current.onRightClick;
        if (callback) callback(e);
      });
    });

    return () => {
      gme.clearInstanceListeners(datalayer);
    };
  }, [datalayer]);

  return null;
};

/**
 * Component to render a polygon on a map
 */
export const DataLayer = forwardRef((props: DataLayerProps, ref: DatalayerRef) => {
  const polygon = useDataLayer(props);

  // biome-ignore lint/correctness/useExhaustiveDependencies:
  useImperativeHandle(ref, () => polygon, []);

  return null;
});