The package next-ymaps3-components provides components for creating maps in Next.js using YMaps3.
The package allows importing YMaps3 components as regular React components. Fully typed.
In RootLayout, you need to wrap the components in YandexMapApiProvider with passing the apiKey.
After YandexMapApiProvider, wrap the components in YandexMapComponentsProvider.
import { YandexMapApiProvider, YandexMapComponentsProvider } from "next-ymaps3-components";
export default function RootLayout({ children }) {
return (
<html lang="ru">
<body>
<YandexMapApiProvider apiKey="YOUR_API_KEY"/>
<YandexMapComponentsProvider>
{children}
</YandexMapComponentsProvider>
</body>
</html>
);
}After that, all Yandex Maps components can be used with regular imports.
import { YMap } from "next-ymaps3-components";
export default function Home() {
return (
<YMap
location={center: [55.75165, 37.61731], zoom: 13}
/>
);
}Map behaviors are changed using the useRemoveBehavior hook. By default, all behaviors are available on the map.
'use client'
import { useRemoveBehavior, DRAG } from "next-ymaps3-components";
export default function Home() {
useRemoveBehavior(DRAG);
return (
<YMap
location={center: [55.75165, 37.61731], zoom: 13}
/>
);
}'use client'
import { useRemoveBehaviorOnHover, DRAG } from "next-ymaps3-components";
export default function Home() {
const elementId = 'element'
useRemoveBehaviorOnHover(DRAG, elementId);
return (
<YMap
location={center: [55.75165, 37.61731], zoom: 13}
>
<YMapMarker coordinates={[55.75165, 37.61731]}>
<div id={elementId}/>
</YMapMarker>
</YMap>
);
}If you need to implement custom logic for changing map behaviors, you can access the useMapBehaviors store.
'use client'
import { useMapBehaviors } from "next-ymaps3-components";
export default function Home() {
const { behaviors, setBehaviors, resetBehaviors, removeBehavior } = useMapBehaviors();
return (
<YMap
location={center: [55.75165, 37.61731], zoom: 13}
/>
);
}Пакет next-ymaps3-components предоставляет компоненты для создания карт на Next.js с использованием YMaps3.
Пакет позволяет импортировать компоненты YMaps3 как обычные реакт компоненты. Полностью типизироованы.
В RootLayout нужно обернуть компоненты в YandexMapApiProvider с передачей apiKey.
После YandexMapApiProvider нужно обернуть компоненты в YandexMapComponentsProvider.
import { YandexMapApiProvider, YandexMapComponentsProvider } from "next-ymaps3-components";
export default function RootLayout({ children }) {
return (
<html lang="ru">
<body>
<YandexMapApiProvider apiKey="YOUR_API_KEY"/>
<YandexMapComponentsProvider>
{children}
</YandexMapComponentsProvider>
</body>
</html>
);
}После этого все компоненты яндекс карт можно будет использовать обычным импортом
import { YMap } from "next-ymaps3-components";
export default function Home() {
return (
<YMap
location={center: [55.75165, 37.61731], zoom: 13}
/>
);
}Поведения карты меняются хуком useRemoveBehavior. По умолчанию в карте доступны все поведения.
'use client'
import { useRemoveBehavior, DRAG } from "next-ymaps3-components";
export default function Home() {
const { removeBehavior } = useRemoveBehavior(DRAG);
return (
<YMap
location={center: [55.75165, 37.61731], zoom: 13}
/>
);
}'use client'
import { useRemoveBehaviorOnHover, DRAG } from "next-ymaps3-components";
export default function Home() {
const elementId = 'element'
useRemoveBehaviorOnHover(DRAG, elementId);
return (
<YMap
location={center: [55.75165, 37.61731], zoom: 13}
>
<YMapMarker coordinates={[55.75165, 37.61731]}>
<div id={elementId}/>
</YMapMarker>
</YMap>
);
}Если нужно сделать собственную логику смену поведений карты, можно обратиться к хранилищу useMapBehaviors
'use client'
import { useMapBehaviors } from "next-ymaps3-components";
export default function Home() {
const { behaviors, setBehaviors, resetBehaviors, removeBehavior } = useMapBehaviors();
return (
<YMap
location={center: [55.75165, 37.61731], zoom: 13}
/>
);
}