docs(readme): document exported typescript interfaces

This commit is contained in:
Christopher Möller
2020-10-06 17:22:40 +02:00
parent 1026d45056
commit 8bd7d7dcf0

View File

@@ -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: