Всем привет, не так давно ко мне в команду в ПРОФИ пришла задача реализации довольно комплексной (в плане верстки и интерактивности) карты, на которой бы отображались заказы, оставленные нашими клиентами. Мы решили использовать фреймворк, адаптирующий яндексовый SDK под реакт. react-yandex-maps + доки к нему UI маркеров почти полностью приходится настраивать по докам уже Яндекса, тк react-yandex-maps предоставляет нам только внешний интерфейс, позволяющий удобно прокинуть параметры в объект маркера как пропсы.   По докам яндекса довольно просто понять, как сделать маркер с статичной картинкой вместо дефолтного пина, но как сделать полностью кастомный маркер разобраться трудновато. Нужен был пин, который состоит из чёрной точки и описания-балуна сверху. При том некоторые пины в дефолтном состоянии должны рисоваться без описания, которое будет появляться только по ховеру или при переходе пина в активное состояние. Более того, у пинов есть несколько особенностей: Анимированная реакция на ховеры Анимированный переход в active-state Анимированное изменение вёрстки по ховеру на другой элемент (по изменению пропсов маркера) Для реализации кастомного пина будем использовать поле iconLayout пропа options компонента Placemark В это поле нам надо будет пробросить template нашего кастомного компонента. О способах создания темплейтов можно почитать в доках Яндекса Пример, как будет выглядеть наш компонент Если кратко, схема работы с темплейтами выглядит так: Этот layout и пробрасываем в iconLayout Если вы обратили внимание на пример компонента, который я привёл выше, можете заметить, что я в своём коде вызываю createPinTemplateFactory сначала с mapInstanceRef, а потом результат с параметрами пина (onClick, isActive и так далее).  В целом можно сделать без фабрики, сразу получать layout через ymaps.templateLayoutFactory.createClass и пробрасывать в iconLayout Первый параметр тут - строка с вёрсткой. Да, вы не ослышались, кидаем сюда строку с HTML. Тут накидываем общий вид компонента и закидываем дефолтные стили через className Благо, что мы можем удобно пробрасывать данные в строки, используя Интерполяцию выражений (структуру вида `Привет, я ${name}`) Пример первого параметра, как он выглядит у меня: Тут описываю контейнер, в нём компонент "описания" и компонент самого "пина" (для фона я использую отдельный див, это нужно, чтобы, при увеличении пина по ховеру, его центр не сдвигался) Второй параметр - JS, который вызовется при создании компонента. Тут описываем состояния, используя пропсы и навешивая listener'ы эвентов geoObject У себя я поделил код тут на несколько частей: Получение элементов для дальнейшего взаимодействия с ними Обработка ховера через mouseenter и mouseleave Тут по ховеру увеличивается размер пина через модификацию стилей  backgroundElement и показывается описание пина. На mouseleave выполняется сброс состояния (можно написать и красивее, тут так написано для максимальной читаемости) Выставление кликабельной зоны маркера через shape Тут я управляю кликабельной зоной маркера.   Привязка onClick Не буду указывать тут весь остальной код, тк его довольно много, и он довольно однообразен.  Общая суть:  Мы имеем доступ к пропсам нашего маркера и можем использовать их в JS части createClass Меняем стили элементов, полученных через this.getParentElement().getElementsByClassName(...)[0]; в зависимости от пропсов Подвязываемся на ивенты geoObject для обработки ховеров и кликов Не забываем, что стилизация работает и через className и css. Вероятно, грубая стилизация через JS и не понадобится. Анимации можем довольно просто реализовывать через css transition Не забываем указывать shape, чтобы пользователям было удобно взаимодействовать с получившимся маркером Мы можем делать красивые маркеры для react-yandex-maps, не ограничиваясь статичными картинками. Конечно, изменение стилей через JS выглядит не очень красиво, но по итогу работает довольно плавно и стабильно, если писать аккуратно :)   Frontend разработчик в поиске заказов ПРОФИ