react-kakao-maps-sdk/esm/components/ZoomControl.js

React components for using kakao map api

import React, { useMemo, useImperativeHandle, useLayoutEffect } from 'react';
import { useMap } from '../hooks/useMap.js';

/**
 * 확대·축소 컨트롤을 생성한다.
 */
const ZoomControl = /*#__PURE__*/React.forwardRef(function ZoomControl(_ref, ref) {
  let {
    position: _position = kakao.maps.ControlPosition.RIGHT
  } = _ref;
  const map = useMap(`ZoomControl`);
  const position = typeof _position === "string" ? kakao.maps.ControlPosition[_position] : _position;
  const ZoomControl = useMemo(() => {
    return new kakao.maps.ZoomControl();
  }, []);
  useImperativeHandle(ref, () => ZoomControl, [ZoomControl]);
  useLayoutEffect(() => {
    map.addControl(ZoomControl, position);
    return () => {
      map.removeControl(ZoomControl);
    };
  }, [map, position, ZoomControl]);
  return null;
});

export { ZoomControl };