✨ Add an optional 'MiniMapNode' field to 'MiniMapProps'.

This lets users supply a custom SVG node to render in the minimap instead of the default rectangle.

packages/minimap/src/MiniMap.tsx

@@ -64,6 +64,9 @@ function MiniMap({
   pannable = false,
   zoomable = false,
   ariaLabel = 'React Flow mini map',
+  // Rename the field to avoid clashes with the default `MiniMapNode` component.
+  // Fallback to that component if none is provided.
+  MiniMapNode: CustomMiniMapNode = MiniMapNode,
 }: MiniMapProps) {
   const store = useStoreApi();
   const svg = useRef<SVGSVGElement>(null);
@@ -176,7 +179,7 @@ function MiniMap({
           const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
 
           return (
-            <MiniMapNode
+            <CustomMiniMapNode
               key={node.id}
               x={x}
               y={y}

packages/minimap/src/types.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CSSProperties, HTMLAttributes, MouseEvent } from 'react';
+import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
 import type { Node, PanelPosition, XYPosition } from '@reactflow/core';
 
 export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
@@ -19,6 +19,7 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   pannable?: boolean;
   zoomable?: boolean;
   ariaLabel?: string | null;
+  MiniMapNode?: ComponentType<MiniMapNodeProps>;
 };
 
 export interface MiniMapNodeProps {