<YMaps /> - provides child components with yandex maps api via context

<Map /> - Map instance

<Clusterer /> - Clusterer instance

<ObjectManager /> - ObjectManager instance

<GeoObject /> - generic GeoObject instance

<Control /> - generic Control instance

GeoObject shorthands

<Placemark />

<Polyline />

<Rectangle />

<Polygon />

<Circle />

Control shorthands

<Button />

<FullscreenControl />

<GeolocationControl />

<RouteEditor />

<RulerControl />

<SearchControl />

<TrafficControl />

<TypeSelector />

<ZoomControl />

<ListBox />

<ListBoxItem />

With Yandex Maps API

window.ymaps.ready(function () {
  const myMap = new window.ymaps.Map('map', {
    center: [55.751574, 37.573856],
    zoom: 9
    searchControlProvider: 'yandex#search'
  const myPlacemark = new window.ymaps.Placemark([55.751574, 37.573856], {
    hintContent: 'Собственный значок метки',
    balloonContent: 'Это красивая метка'
    iconLayout: 'default#image',
    iconImageHref: 'images/myIcon.gif',
    iconImageSize: [30, 42],
    iconImageOffset: [-3, -42]
  myMap.geoObjects.add(myPlacemark)
With react-yandex-maps
import { YMaps, Map, Placemark } from 'react-yandex-maps';
const mapState = { center: [55.76, 37.64], zoom: 10 };
const MyPlacemark = () => (
  <YMaps>
    <Map state={mapState}>
      <Placemark
        geometry={{
          coordinates: [55.751574, 37.573856]
        properties={{
          hintContent: 'Собственный значок метки',
          balloonContent: 'Это красивая метка'
        options={{
          iconLayout: 'default#image',
          iconImageHref: 'images/myIcon.gif',
          iconImageSize: [30, 42],
          iconImageOffset: [-3, -42]
  </YMaps>
Enterprise
react-yandex-maps library also supports enterprise version of Yandex.Maps API:
  <YMaps
    enterprise
    query={{
      apikey: '// your api key here',
Events
All Objects events are available, just use camelCase event names instead of

default ones (for example geometrychange -> onGeometryChange):
With Yandex Maps API
function onGeometryChange() {/* more code */}
const circle = new window.ymaps.GeoObject({
  geometry: {
    type: "Circle",
    coordinates: [55.76, 37.64],
    radius: 10000
circle.events.add('geometrychange', handleEventSomehow)
With react-yandex-maps
import { Circle } from 'react-yandex-maps'
const CircleWithEvents = ({onGeometryChange}) => (
  <Circle
    geometry={{
      coordinates: [55.76, 37.64],
      radius: 10000
    onGeometryChange={onGeometryChange}
GitHub
Multi-container application providing a UI and GraphQL API to search museum names and locations
24 May 2023