diff --git a/README.md b/README.md index df025d32..e70014c6 100644 --- a/README.md +++ b/README.md @@ -131,6 +131,12 @@ const BasicFlow = () => ; - `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: diff --git a/src/additional-components/Background/index.tsx b/src/additional-components/Background/index.tsx index 4f1530a1..5209d6b0 100644 --- a/src/additional-components/Background/index.tsx +++ b/src/additional-components/Background/index.tsx @@ -7,7 +7,7 @@ import { createGridLinesPath, createGridDotsPath } from './utils'; import './style.css'; -interface BackgroundProps extends HTMLAttributes { +export interface BackgroundProps extends HTMLAttributes { variant?: BackgroundVariant; gap?: number; color?: string; diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx index c107f94e..ae5a53f3 100644 --- a/src/additional-components/Controls/index.tsx +++ b/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 { +export interface ControlProps extends React.HTMLAttributes { showZoom?: boolean; showFitView?: boolean; showInteractive?: boolean; diff --git a/src/additional-components/MiniMap/index.tsx b/src/additional-components/MiniMap/index.tsx index e1670738..3f5d6a75 100644 --- a/src/additional-components/MiniMap/index.tsx +++ b/src/additional-components/MiniMap/index.tsx @@ -10,7 +10,7 @@ import './style.css'; type StringFunc = (node: Node) => string; -interface MiniMapProps extends React.HTMLAttributes { +export interface MiniMapProps extends React.HTMLAttributes { nodeColor?: string | StringFunc; nodeStrokeColor?: string | StringFunc; nodeClassName?: string | StringFunc; diff --git a/src/index.ts b/src/index.ts index 3ecb6730..3fe2e30e 100644 --- a/src/index.ts +++ b/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'; diff --git a/website/src/markdown/docs/api/component-props.md b/website/src/markdown/docs/api/component-props.md index 5e65f317..cc2f6864 100644 --- a/website/src/markdown/docs/api/component-props.md +++ b/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'; +``` diff --git a/website/src/markdown/docs/api/components/background.md b/website/src/markdown/docs/api/components/background.md index da687ea3..4b1f428f 100644 --- a/website/src/markdown/docs/api/components/background.md +++ b/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`. \ No newline at end of file diff --git a/website/src/markdown/docs/api/components/controls.md b/website/src/markdown/docs/api/components/controls.md index b5b8ed7c..38be8878 100644 --- a/website/src/markdown/docs/api/components/controls.md +++ b/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 \ No newline at end of file +- `className`: additional class name + +**Typescript:** The interface of the Controls Prop Types are exported as `ControlProps`. \ No newline at end of file diff --git a/website/src/markdown/docs/api/components/minimap.md b/website/src/markdown/docs/api/components/minimap.md index d4e47c77..6724db1e 100644 --- a/website/src/markdown/docs/api/components/minimap.md +++ b/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 \ No newline at end of file +- `className`: additional class name + +**Typescript:** The interface of the MiniMap Prop Types are exported as `MiniMapProps`. \ No newline at end of file diff --git a/website/src/markdown/docs/api/handle.md b/website/src/markdown/docs/api/handle.md index 1cd2cf4f..c0dca6ca 100644 --- a/website/src/markdown/docs/api/handle.md +++ b/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). \ No newline at end of file +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).