Function useRectangle

src/components/rectangle.tsx:42–129

(props: RectangleProps)

export type RectangleRef = Ref<google.maps.Rectangle | null>;

function useRectangle(props: RectangleProps) {
  const {
    onClick,
    onDrag,
    onDragStart,
    onDragEnd,
    onMouseOver,
    onMouseOut,
    onBoundsChanged,
    bounds,
    defaultBounds,
    ...destructuredOptions
  } = props;

  const [rectangle, setRectangle] = useState<google.maps.Rectangle | null>(
    null
  );
  const map = useMap();

  // Memoize options with automatic inference of clickable/draggable/editable
  const rectangleOptions = useMemoized(
    {
      ...destructuredOptions,
      clickable: destructuredOptions.clickable ?? Boolean(onClick),
      draggable:
        destructuredOptions.draggable ??
        Boolean(onDrag || onDragStart || onDragEnd || onBoundsChanged),
      editable: destructuredOptions.editable ?? Boolean(onBoundsChanged)
    },
    isDeepEqual
  );

  useEffect(() => {
    if (!map) {
      if (map === undefined)
        console.error('<Rectangle> has to be inside a Map component.');

      return;
    }

    const newRectangle = new google.maps.Rectangle({
      ...rectangleOptions,
      bounds: bounds ?? defaultBounds
    });
    newRectangle.setMap(map);
    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional to sync the imperative instance with state
    setRectangle(newRectangle);

    return () => {
      newRectangle.setMap(null);
      setRectangle(null);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps -- rectangle options are handled separately to avoid recreating the instance
  }, [map]);

  useMapsEventListener(rectangle, 'click', onClick);
  useMapsEventListener(rectangle, 'drag', onDrag);
  useMapsEventListener(rectangle, 'dragstart', onDragStart);