From 34f85fd66207a8949eabe4db39d39551e4e85dba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20Mo=CC=88ller?= <chrtze@gmail.com>
Date: Tue, 6 Oct 2020 17:29:00 +0200
Subject: [PATCH] docs(website): add documentation of exported interfaces to
 website docs

---
 website/src/markdown/docs/api/component-props.md       | 6 ++++++
 website/src/markdown/docs/api/components/background.md | 2 ++
 website/src/markdown/docs/api/components/controls.md   | 4 +++-
 website/src/markdown/docs/api/components/minimap.md    | 4 +++-
 website/src/markdown/docs/api/handle.md                | 4 +++-
 5 files changed, 17 insertions(+), 3 deletions(-)

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).