feat(hooks): add useReactFlow hook, refactor types and properties

src/additional-components/Background/index.tsx

@@ -1,16 +1,9 @@
-import React, { memo, useMemo, FC, HTMLAttributes } from 'react';
+import React, { memo, useMemo, FC } from 'react';
 import cc from 'classcat';
 
 import { useStore } from '../../store';
-import { BackgroundVariant, ReactFlowState } from '../../types';
 import { createGridLinesPath, createGridDotsPath } from './utils';
-
-export interface BackgroundProps extends HTMLAttributes<SVGElement> {
-  variant?: BackgroundVariant;
-  gap?: number;
-  color?: string;
-  size?: number;
-}
+import { BackgroundVariant, ReactFlowState, BackgroundProps } from '../../types';
 
 const defaultColors = {
   [BackgroundVariant.Dots]: '#81818a',

src/additional-components/Controls/index.tsx

@@ -1,7 +1,8 @@
-import React, { memo, useCallback, HTMLAttributes, FC, useEffect, useState } from 'react';
+import React, { memo, useCallback, FC, useEffect, useState } from 'react';
 import cc from 'classcat';
 
 import { useStore, useStoreApi } from '../../store';
+import useViewportHelper from '../../hooks/useViewportHelper';
 
 import PlusIcon from '../../../assets/icons/plus.svg';
 import MinusIcon from '../../../assets/icons/minus.svg';
@@ -9,21 +10,7 @@ import FitviewIcon from '../../../assets/icons/fitview.svg';
 import LockIcon from '../../../assets/icons/lock.svg';
 import UnlockIcon from '../../../assets/icons/unlock.svg';
 
-import useZoomPanHelper from '../../hooks/useZoomPanHelper';
-import { FitViewParams, ReactFlowState } from '../../types';
-
-export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
-  showZoom?: boolean;
-  showFitView?: boolean;
-  showInteractive?: boolean;
-  fitViewParams?: FitViewParams;
-  onZoomIn?: () => void;
-  onZoomOut?: () => void;
-  onFitView?: () => void;
-  onInteractiveChange?: (interactiveStatus: boolean) => void;
-}
-
-export interface ControlButtonProps extends HTMLAttributes<HTMLButtonElement> {}
+import { ControlProps, ControlButtonProps, ReactFlowState } from '../../types';
 
 export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...rest }) => (
   <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
@@ -49,7 +36,7 @@ const Controls: FC<ControlProps> = ({
   const store = useStoreApi();
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const isInteractive = useStore(isInteractiveSelector);
-  const { zoomIn, zoomOut, fitView } = useZoomPanHelper();
+  const { zoomIn, zoomOut, fitView } = useViewportHelper();
 
   const mapClasses = cc(['react-flow__controls', className]);
 

src/additional-components/MiniMap/index.tsx

@@ -1,23 +1,14 @@
-import React, { memo, HTMLAttributes } from 'react';
+import React, { memo } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
+import MiniMapNode from './MiniMapNode';
+
 import { useStore } from '../../store';
 import { getRectOfNodeInternals } from '../../utils/graph';
 import { getBoundsofRects } from '../../utils';
-import { Node, ReactFlowState, Rect } from '../../types';
-import MiniMapNode from './MiniMapNode';
 
-type StringFunc = (node: Node) => string;
-
-export interface MiniMapProps extends HTMLAttributes<SVGSVGElement> {
-  nodeColor?: string | StringFunc;
-  nodeStrokeColor?: string | StringFunc;
-  nodeClassName?: string | StringFunc;
-  nodeBorderRadius?: number;
-  nodeStrokeWidth?: number;
-  maskColor?: string;
-}
+import { MiniMapProps, GetMiniMapNodeAttribute, ReactFlowState, Rect } from '../../types';
 
 declare const window: any;
 
@@ -47,11 +38,13 @@ const MiniMap = ({
   const mapClasses = cc(['react-flow__minimap', className]);
   const elementWidth = (style?.width || defaultWidth)! as number;
   const elementHeight = (style?.height || defaultHeight)! as number;
-  const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
+  const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as GetMiniMapNodeAttribute;
   const nodeStrokeColorFunc = (
     nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor
-  ) as StringFunc;
-  const nodeClassNameFunc = (nodeClassName instanceof Function ? nodeClassName : () => nodeClassName) as StringFunc;
+  ) as GetMiniMapNodeAttribute;
+  const nodeClassNameFunc = (
+    nodeClassName instanceof Function ? nodeClassName : () => nodeClassName
+  ) as GetMiniMapNodeAttribute;
   const hasNodes = nodeInternals && nodeInternals.size > 0;
   // @TODO: work with nodeInternals instead of converting it to an array
   const nodes = Array.from(nodeInternals).map(([_, node]) => node);