Some updates that makes this library to work with the newest React versions + some bug fixes

package.json

@@ -26,8 +26,8 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": ">= 16.8.x",
-    "react-dom": ">= 16.8.x"
+    "react": ">= 18.2.0",
+    "react-dom": ">= 18.2.0"
   },
   "husky": {
     "hooks": {

src/Map.tsx

@@ -1,6 +1,6 @@
 /* global mapkit */
 
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import { MapkitContext, MapkitProvider } from './MapkitProvider'
 import { useMap } from './useMap'
@@ -48,17 +48,16 @@ const CreateMap: React.FC<MapOptions> = ({ children, ...defaultOptions }) => {
   )
 }
 
-export const Map: React.FC<
-  {
-    // ⚠️ Pick between callbackUrl or token.
-    // https://developer.apple.com/documentation/mapkitjs/mapkit/2974045-init
-    // not needed if within a `MapProvider`
-    tokenOrCallback?: string
-    language?: string
-    mapRef?: MapRef
-    mapkit?: typeof mapkit
-    map?: mapkit.Map
-  } & MapOptions
+export const Map: React.FC<PropsWithChildren<{
+  // ⚠️ Pick between callbackUrl or token.
+  // https://developer.apple.com/documentation/mapkitjs/mapkit/2974045-init
+  // not needed if within a `MapProvider`
+  tokenOrCallback?: string
+  language?: string
+  mapRef?: MapRef
+  mapkit?: typeof mapkit
+  map?: mapkit.Map
+} & MapOptions>
 > = ({ tokenOrCallback, language = 'en', mapkit, map, mapRef, ...props }) => {
   let context = React.useContext(MapkitContext)
 

src/MapkitProvider.tsx

@@ -1,6 +1,6 @@
 /* global mapkit */
 
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import load from 'little-loader'
 
 type MapkitContextType = {
@@ -20,7 +20,7 @@ type ProviderProps = {
   language?: string
 }
 
-export const MapkitProvider: React.FC<ProviderProps> = ({
+export const MapkitProvider: React.FC<PropsWithChildren<ProviderProps>> = ({
   tokenOrCallback,
   language,
   children,

src/Marker.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import { MapContext } from './Map'
 
@@ -11,11 +11,15 @@ import {
 type MarkerProps = {
   latitude: number
   longitude: number
+  title?: string
+  subtitle?: string
 } & MarkerOptions
 
-export const Marker: React.FC<MarkerProps> = ({
+export const Marker: React.FC<PropsWithChildren<MarkerProps>> = ({
   latitude,
   longitude,
+  title,
+  subtitle,
   ...options
 }) => {
   const { mapkit, map } = React.useContext(MapContext)

src/useMap.tsx

@@ -83,5 +83,17 @@ export const useMap = (defaultOptions: MapOptions = {}) => {
       },
       [map],
     ),
+
+    drawLine: React.useCallback(
+      (coords: Array<mapkit.Coordinate>, style: mapkit.Style) => {
+        if (map && mapkit) {
+          let polyline =
+            new mapkit.PolylineOverlay(coords, { style: style });
+          map.addOverlay(polyline);
+        }
+      },
+      [map, mapkit],
+    ),
+
   }
-}
+}

src/utils.ts

@@ -96,6 +96,7 @@ export type MapOptions = Merge<
     region?: RegionType
     center?: NumberTuple
     padding?: PaddingType
+    tintColor?: string
   }
 >
 
@@ -105,12 +106,14 @@ export const propsToMapConstructionOptions = ({
   region,
   center,
   padding,
+  tintColor,
   ...options
 }: MapOptions) => ({
   visibleMapRect: visibleMapRect && createMapRect(...visibleMapRect),
   region: region && createCoordinateRegionFromValues(region),
   center: center && createCoordinate(...center),
   padding: padding ? createPadding(padding) : createPadding(0),
+  tintColor: tintColor,
   ...options,
 })