@zhilibyli/react-compiler-yandex-maps

Библиотека для получения компонентов ymaps3 через import

React-обёртка над ymaps3: альтернативный способ получения компонентов Яндекс.Карт. Используйте import вместо создания скрипта и получения компонентов через асинхронный window.ymaps3.import.

Библиотека написана на TypeScript с использованием @yandex/ymaps3-types.

Установка

npm i @zhilibyli/react-compiler-yandex-maps

или

yarn add @zhilibyli/react-compiler-yandex-maps

Использование с TypeScript

npm i -D @yandex/ymaps3-types@latest

Примеры

• Пример 1: карта и прямоугольные объекты с подсказками
• Пример 2: карта с кластеризатором
• Пример 3: карта с маршрутами (Для маршрутов нужно создать API-ключ для Distance Matrix и Route Planning в Кабинете разработчика)

Зачем это нужно

• ваши компоненты остаются простыми
• проще, чем подход из официальной документации
• не нужно писать логику загрузки компонентов и модулей для них
• не нужно создавать скрипт или настраивать externals в webpack

✅ Ваш код с этой библиотекой

import React from "react";
import {
  YMap,
  YMapDefaultSchemeLayer,
  YMapDefaultFeaturesLayer
  // ...другие компоненты
} from "@zhilibyli/react-compiler-yandex-maps";
import { features, LOCATION } from './helpers'

function Map() {
  return (
    <YMapComponentsProvider apiKey={process.env.REACT_APP_YMAP_KEY}>
      <YMap location={location}>
        <YMapDefaultSchemeLayer />
        <YMapDefaultFeaturesLayer />
        <YMapDefaultMarker
          coordinates={LOCATION.coordinates}
        />
      </YMap>
    </YMapComponentsProvider>
  );
}

export default Map;

❌ Ваш код без этой библиотеки

import React, {useEffect, useMemo} from "react";
import {features, LOCATION} from './helpers'

function Map() {
  const [data, setData] = useState(); 
  const {
    YMap,
    // ...другие компоненты
  } = useMemo(() => {
    if (data?.reactify) {
      return reactify.module(data.ymap);
    }
  }, [data]);

  useEffect(() => {
    const script = document.createElement('script');
    document.body.appendChild(script);
    script.type = "text/javascript";
    script.src = `https://api-maps.yandex.ru/v3/?apikey=${key}&lang=${lang}`;
    script.onload = async () => {
      const ymaps = window.ymaps3
      await ymaps.ready;
      const ymaps3Reactify = await ymaps.import('@yandex/ymaps3-reactify');
      const reactify = ymaps3Reactify.reactify.bindTo(React, ReactDOM);

      setData({
        reactify,
        ymaps
      });
      /*
      и другая логика, не связанная с рендерингом,
      для загрузки модулей ymap, например YMapDefaultMarker
      */
    }
  }, [])
  
  if (!YMap) {
    return null;
  }

  return (
    <YMap location={location}>
      <YMapDefaultSchemeLayer/>
      <YMapDefaultFeaturesLayer/>
      <YMapDefaultMarker
        coordinates={LOCATION.coordinates}
      />
    </YMap>
  );
}

export default Map;

С чего начать

1. Получите API-ключ для JS API карт
2. Укажите домен, на котором будет размещена карта
3. Для разработки измените ваш /etc/hosts, чтобы проксировать домен на localhost (карта будет работать на http://{domain}:{port})
4. Установите и используйте библиотеку

Примеры на codesandbox смотрите выше. Более подробную информацию можно найти в официальной документации.

API

API компонента YMapComponentsProvider

YMapComponentsProvider — корневой компонент, который должен содержать остальные компоненты библиотеки в качестве дочерних узлов.

interface YMapComponentsProviderProps {
  apiKey: string
  lang?: string
  onLoad?: (params: {
    reactify: Reactify;
    ymaps: typeof import("@yandex/ymaps3-types/index");
  }) => any
  onError: (e?: unknown) => void
  children: ReactNode | ReactNode []
  reuseLoadPromise?: boolean;
}

type getYmaps3ReadyObject = () => Promise<YMapsV3>;

Остальные компоненты имеют такой же API, как в официальной документации

Библиотека предоставляет следующие компоненты:

• YMapComponentsProvider
• YMap
• YMapDefaultMarker
• YMapHintContext
• YMapHint
• YMapClusterer
• YMapZoomControl
• YMapGeolocationControl
• ThemeContext
• YMapDefaultSchemeLayer
• YMapDefaultFeaturesLayer
• YMapLayer
• YMapControl
• YMapControls
• YMapControlButton
• YMapTileDataSource
• YMapMarker
• YMapListener
• YMapFeature
• YMapDefaultSatelliteLayer
• YMapCollection
• YMapContainer
• YMapFeatureDataSource
• YMapCustomClusterer