Merge branch 'main' of github.com:wbkd/react-flow into main

README.md

@@ -131,6 +131,12 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `deleteKeyCode`: default: `8` (delete)
 - `selectionKeyCode`: default: `16` (shift)
 
+**Typescript:** The interface of the ReactFlow Prop Types are exported as `ReactFlowProps`. You can use it in your code as follows:
+
+```javascript
+import { ReactFlowProps } from 'react-flow-renderer';
+```
+
 ## React Flow Instance
 
 You can receive a `reactFlowInstance` by using the `onLoad` callback:
@@ -272,6 +278,8 @@ const targetHandleWithValidation = (
 - `style`: css properties
 - `className`: additional class name
 
+**Typescript:** The interface of the Handle Prop Types are exported as `HandleProps`.
+
 ### Validation
 
 The handle receives the additional class names `connecting` when the connection line is above the handle and `valid` if the connection is valid. You can find an example which uses these classes [here](/example/src/Validation/index.js).
@@ -413,6 +421,8 @@ const FlowWithBackground = () => (
 - `style`: css properties
 - `className`: additional class name
 
+**Typescript:** The interface of the Background Prop Types are exported as `BackgroundProps`.
+
 ## MiniMap
 
 You can use the mini map plugin by passing it as a children to the `ReactFlow` component:
@@ -446,6 +456,8 @@ const FlowWithMiniMap = () => (
 - `style`: css properties
 - `className`: additional class name
 
+**Typescript:** The interface of the MiniMap Prop Types are exported as `MiniMapProps`.
+
 ## Controls
 
 The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button. You can use it by passing it as a children to the `ReactFlow` component:
@@ -472,6 +484,8 @@ const FlowWithControls = () => (
 - `style`: css properties
 - `className`: additional class name
 
+**Typescript:** The interface of the Controls Prop Types are exported as `ControlProps`.
+
 ## ReactFlowProvider
 
 If you need access to the internal state and action of React Flow outside of the `ReactFlow` component you can wrap it with the `ReactFlowProvider` component:

src/additional-components/Background/index.tsx

@@ -7,7 +7,7 @@ import { createGridLinesPath, createGridDotsPath } from './utils';
 
 import './style.css';
 
-interface BackgroundProps extends HTMLAttributes<SVGElement> {
+export interface BackgroundProps extends HTMLAttributes<SVGElement> {
   variant?: BackgroundVariant;
   gap?: number;
   color?: string;

src/additional-components/Controls/index.tsx

@@ -11,7 +11,7 @@ import UnlockIcon from '../../../assets/icons/unlock.svg';
 
 import './style.css';
 
-interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
   showZoom?: boolean;
   showFitView?: boolean;
   showInteractive?: boolean;

src/additional-components/MiniMap/index.tsx

@@ -10,7 +10,7 @@ import './style.css';
 
 type StringFunc = (node: Node) => string;
 
-interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
+export interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
   nodeColor?: string | StringFunc;
   nodeStrokeColor?: string | StringFunc;
   nodeClassName?: string | StringFunc;

src/index.ts

@@ -1,7 +1,6 @@
 import ReactFlow from './container/ReactFlow';
 
 export default ReactFlow;
-export { ReactFlowProps } from './container/ReactFlow';
 
 export { default as Handle } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
@@ -12,5 +11,10 @@ export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/uti
 export { isNode, isEdge, removeElements, addEdge, getOutgoers, getIncomers, getConnectedEdges } from './utils/graph';
 
 export * from './additional-components';
-export * from './types';
 export * from './store/hooks';
+export * from './types';
+
+export { ReactFlowProps } from './container/ReactFlow';
+export { MiniMapProps } from './additional-components/MiniMap';
+export { ControlProps } from './additional-components/Controls';
+export { BackgroundProps } from './additional-components/Background';

website/src/markdown/docs/api/component-props.md

@@ -71,3 +71,9 @@ import ReactFlow from 'react-flow-renderer';
 ### Keys
 - `deleteKeyCode`: default: `8` (backspace)
 - `selectionKeyCode`: default: `16` (shift)
+
+**Typescript:** The interface of the ReactFlow Prop Types are exported as `ReactFlowProps`. You can use it in your code as follows:
+
+```javascript
+import { ReactFlowProps } from 'react-flow-renderer';
+```

website/src/markdown/docs/api/components/background.md

@@ -29,3 +29,5 @@ const FlowWithBackground = () => (
 - `color`: string - the color of the dots or lines - default: `#81818a` for dots, `#eee` for lines
 - `style`: css properties
 - `className`: additional class name
+
+**Typescript:** The interface of the Background Prop Types are exported as `BackgroundProps`.

website/src/markdown/docs/api/components/controls.md

@@ -22,4 +22,6 @@ const FlowWithControls = () => (
 - `showFitView`: boolean - default: true
 - `showInteractive`: boolean - default: true
 - `style`: css properties
-- `className`: additional class name
+- `className`: additional class name
+
+**Typescript:** The interface of the Controls Prop Types are exported as `ControlProps`.

website/src/markdown/docs/api/components/minimap.md

@@ -33,4 +33,6 @@ const FlowWithMiniMap = () => (
 - `nodeClassName`: string or function for adding an additional class to the nodes inside the mini map
 - `maskColor`: string
 - `style`: css properties
-- `className`: additional class name
+- `className`: additional class name
+
+**Typescript:** The interface of the MiniMap Prop Types are exported as `MiniMapProps`.

website/src/markdown/docs/api/handle.md

@@ -28,6 +28,8 @@ const targetHandleWithValidation = (
 - `style`: css properties
 - `className`: additional class name
 
+**Typescript:** The interface of the Handle Prop Types are exported as `HandleProps`.
+
 ### Validation
 
 The handle receives the additional class names `connecting` when the connection line is above the handle and `valid` if the connection is valid. You can find an example which uses these classes [here](/examples/validation).
@@ -35,4 +37,4 @@ The handle receives the additional class names `connecting` when the connection
 ### Multiple Handles
 
 If you need multiple source or target handles you can achieve this by creating a custom node. Normally you just use the id of a node for the `source` or `target` of an edge. If you have multiple source or target handles you need to pass an id to these handles. These ids get then added to the node id, so that you can connect a specific handle. If you have a node with an id = `1` and a handle with an id = `a` you can connect this handle by using the id = `1__a`.
-You can find an example of how to implement a custom node with multiple handles in the [custom node example](https://github.com/wbkd/react-flow/blob/main/example/src/CustomNode/ColorSelectorNode.js#L18-L29).
+You can find an example of how to implement a custom node with multiple handles in the [custom node example](https://github.com/wbkd/react-flow/blob/main/example/src/CustomNode/ColorSelectorNode.js#L18-L29).