withYMaps

Эта библиотека поставляется с функцией создания HOC, которая может предоставить любому компоненту вашего приложения доступ к API Яндекс.Карт.

Создание компонента с помощью этой функции даст вашим компонентам доступ к объекту API Яндекс.Карт. Вы можете использовать этот API в своих компонентах различными способами.

Имейте в виду, что по умолчанию @pbe/react-yandex-maps загружается только основное API Яндекс.Карт, поэтому, если вам нужен доступ к чему-то, что не входит в ядро API Яндекс.Карт, вам нужно указать это явно. Есть несколько способов сделать это: с третьим аргументом withYMaps HOC, с modules проп подключенного компонента или путем предоставления требуемого модуля в query.load проп компонента <YMaps />.

В приведенном ниже примере мы создаем HOC, который будет загружать API маршрутов Яндекс.Карт, а затем мы используем этот API внутри нашего LengthPrinter компонента для отображения длины маршрута на экране.

import React from 'react';

export default function App() {
  const LengthPrinter = React.useMemo(() => {
    return ({ ymaps, route }) => {
      const [routeLength, setRouteLength] = React.useState(null);
      React.useEffect(() => {
        let canceled = false;
        if (ymaps && ymaps.route) {
          ymaps.route(route).then((route) => {
            if (!canceled) {
              setRouteLength(route.getHumanLength().replace(' ', ' '));
            }
          });
        }
        return () => (canceled = true);
      }, [ymaps, ...route]);

      return routeLength ? (
        <p>
          The route from <strong>{route[0]}</strong> to{' '}
          <strong>{route[1]}</strong> is <strong>{routeLength}</strong> long
        </p>
      ) : (
        <p>Loading route...</p>
      );
    };
  }, []);

  const ConnectedLengthPrinter = React.useMemo(() => {
    return withYMaps(LengthPrinter, true, ['route']);
  }, [LengthPrinter]);

  return (
    <YMaps query={{ lang: 'en_RU' }}>
      <ConnectedLengthPrinter route={['Moscow, Russia', 'Berlin, Germany']} />
    </YMaps>
  );
}

Не забывайте, что любой компонент из этой библиотеки (даже созданный с помощью функции создания HOC) должен быть обернут в YMaps компонент провайдера.