add Annotation component

src/Annotation.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import { MapContext } from './Map'
+
+import {
+  createCoordinate,
+  propsToMarkerConstructionOptions,
+  AnnotationOptions,
+} from './utils'
+
+type AnnotationProps = {
+  latitude: number
+  longitude: number
+  factory: (
+    coordinate: mapkit.Coordinate,
+    options?: mapkit.AnnotationConstructorOptions,
+  ) => Element
+} & AnnotationOptions
+
+export const Annotation: React.FC<AnnotationProps> = ({
+  latitude,
+  longitude,
+  factory,
+  ...options
+}) => {
+  const { mapkit, map } = React.useContext(MapContext)
+  const annotation = React.useRef<mapkit.Annotation>()
+
+  React.useEffect(() => {
+    if (mapkit && map) {
+      annotation.current = new mapkit.Annotation(
+        createCoordinate(latitude, longitude),
+        factory,
+        propsToMarkerConstructionOptions(options),
+      )
+
+      map.addAnnotation(annotation.current)
+    }
+    return () => { annotation.current && map && map.removeAnnotation(annotation.current) }
+  }, [mapkit, map])
+
+  return null
+}

src/index.tsx

@@ -1,3 +1,4 @@
+export * from './Annotation'
 export * from './MapkitProvider'
 export * from './Map'
 export * from './Marker'

src/utils.ts

@@ -10,6 +10,10 @@ type MapConstructionOptions = NonNullable<
   ConstructorParameters<typeof mapkit.Map>[1]
 >
 
+type AnnotationConstructionOptions = NonNullable<
+  ConstructorParameters<typeof mapkit.Annotation>[1]
+>
+
 type MarkerConstructionOptions = NonNullable<
   ConstructorParameters<typeof mapkit.MarkerAnnotation>[1]
 >
@@ -117,6 +121,13 @@ export const propsToMapConstructionOptions = ({
 // 📌 Marker Options
 
 // these are the props we expose to users.
+export type AnnotationOptions = Merge<
+  AnnotationConstructionOptions,
+  {
+    padding?: PaddingType
+  }
+>
+
 export type MarkerOptions = Merge<
   MarkerConstructionOptions,
   {