feat(website): init

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

@@ -0,0 +1,31 @@
+---
+title: Background
+---
+
+React Flow comes with two background variants: **dots** and **lines**. You can use it by passing it as a children to the `ReactFlow` component:
+
+### Usage
+
+```jsx
+import ReactFlow, { Background } from 'react-flow-renderer';
+
+const FlowWithBackground = () => (
+  <ReactFlow elements={elements}>
+    <Background
+      variant="dots"
+      gap={12}
+      size={4}
+    />
+  </ReactFlow>
+);
+```
+
+
+### Prop Types
+
+- `variant`: string - has to be 'dots' or 'lines' - default: `dots`
+- `gap`: number - the gap between the dots or lines - default: `16`
+- `size`: number - the radius of the dots or the stroke width of the lines - default: `0.5`
+- `color`: string - the color of the dots or lines - default: `#999` for dots, `#eee` for lines
+- `style`: css properties
+- `className`: additional class name

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

@@ -0,0 +1,25 @@
+---
+title: 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:
+
+### Usage
+
+```jsx
+import ReactFlow, { Controls } from 'react-flow-renderer';
+
+const FlowWithControls = () => (
+  <ReactFlow elements={elements}>
+    <Controls />
+  </ReactFlow>
+);
+```
+
+### Prop Types
+
+- `showZoom`: boolean - default: true
+- `showFitView`: boolean - default: true
+- `showInteractive`: boolean - default: true
+- `style`: css properties
+- `className`: additional class name

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

@@ -0,0 +1,36 @@
+---
+title: Mini Map
+---
+
+You can use the mini map plugin by passing it as a children to the `ReactFlow` component:
+
+### Usage
+
+```jsx
+import ReactFlow, { MiniMap } from 'react-flow-renderer';
+
+const FlowWithMiniMap = () => (
+  <ReactFlow elements={elements}>
+    <MiniMap
+      nodeColor={(node) => {
+        switch (node.type) {
+          case 'input': return 'red';
+          case 'default': return '#00ff00';
+          case 'output': return 'rgb(0,0,255)';
+          default: return '#eee';
+        }
+      }}
+    />
+  </ReactFlow>
+);
+```
+
+
+### Prop Types
+
+- `nodeColor`: string or function - If you pass a color as a string all nodes will get that color. If you pass a function you can return a color depending on the passed node.
+- `nodeBorderRadius`: number
+- `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

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

@@ -0,0 +1,21 @@
+---
+title: Provider
+---
+
+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:
+
+```jsx
+import ReactFlow, { ReactFlowProvider } from 'react-flow-renderer';
+
+const FlowWithOwnProvider = () => (
+  <ReactFlowProvider>
+    <ReactFlow
+      elements={elements}
+      onElementClick={onElementClick}
+      onConnect={onConnect}
+    />
+  </ReactFlowProvider>
+);
+```
+
+It is used in the [provider example](example/src/Provider/index.js).