Skip to main content

YMaps Provider

This component is used to provide YMaps components with Yandex.Maps API context. You always need to add this component somewhere above your maps in the component tree.

As <YMaps /> provides an API to fetch Yandex.Maps API, this is the component you can use to customize your api query:

const Application = () => (
<YMaps query={{ lang: 'en_RU' }}>Application with YMaps Provider</YMaps>
);
render(<Application />);

Now you can add map components anywhere in your component tree below <YMaps /> and they will have access to anything needed to get Yandex.Maps API.

Where To Put Provider?

Don't be afraid to add provider higher in your application tree, Yandex.Maps API wouldn't be fetched until some map component will request it. If this behavior is undesirable, you can use preload prop to tell provider to fetch Yandex Maps API as soon as it mounts in the tree.

Keep in mind that by default provider will fetch only the critical part of Yandex.Maps API. After that every map component will handle fetching corresponding part of Yandex Maps API automatically.

If you want to load more parts of the Yandex.Maps right away you can use load parameter in component query prop to define what exactly you want to fetch.

All query parameters, except for onload and onerror, from Yandex Maps API documentation are supported by query prop. Don't worry, you still can get access to onLoad and onError on all connected components