diff --git a/.gitignore b/.gitignore
index 72cf9624..733f8f6e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,5 @@ examples/build
 cypress/videos
 cypress/screenshots
 dist
-.env
\ No newline at end of file
+.env
+stats.html
\ No newline at end of file
diff --git a/README.md b/README.md
index 57ccb09a..6ced9125 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ React Flow is a library for building node-based graphs. You can easily implement
 - [Key Features](#key-features)
 - [Installation](#installation)
 - [Usage](#usage)
-- [ReactFlow Component Props](#reactflow-component-props)
+- [ReactFlow Component Prop Types](#reactflow-component-prop-types)
 - [Styling](#styling)
 - [Nodes](#nodes)
   - [Options](#options-1)
@@ -62,7 +62,7 @@ const BasicFlow = () => (
 );
 ```
 
-## ReactFlow Component Props
+## ReactFlow Component Prop Types
 
 - `elements`: array of [nodes](#nodes) and [edges](#edges) *(required)*
 - `onElementClick`: element click handler
@@ -249,20 +249,34 @@ import ReactFlow, { isNode, isEdge, removeElements, addEdge } from 'react-flow-r
 
 #### isEdge
 
-`isEdge = (element: Node | Edge): boolean`
+Returns true if element is an edge
+
+`isEdge = (element: Node | Edge): element is Edge`
 
 #### isNode
 
-`isNode = (element: Node | Edge): boolean`
+Returns true if element is a node
+
+`isNode = (element: Node | Edge): element is Node`
 
 #### removeElements
 
+Returns elements without the elements from `elementsToRemove`
+
 `removeElements = (elementsToRemove: Elements, elements: Elements): Elements`
 
 #### addEdge
 
+Returns elements array with added edge
+
 `addEdge = (edgeParams: Edge, elements: Elements): Elements`
 
+#### project
+
+Transforms pixel coordinates to the internal React Flow coordinate system
+
+`project = (position: XYPosition): XYPosition`
+
 You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.
 
 ## Plugins
diff --git a/cypress/integration/flow/basic.spec.js b/cypress/integration/flow/basic.spec.js
index ae69e220..46e2aed7 100644
--- a/cypress/integration/flow/basic.spec.js
+++ b/cypress/integration/flow/basic.spec.js
@@ -3,6 +3,7 @@ describe('Basic Graph Rendering', () => {
     cy.visit('/basic');
 
     cy.get('.react-flow__renderer');
+    cy.get('.react-flow-basic-example'); // check if className prop works
     cy.get('.react-flow__node').should('have.length', 4);
     cy.get('.react-flow__edge').should('have.length', 2);
     cy.get('.react-flow__node').children('div').children('.react-flow__handle');
diff --git a/example/package-lock.json b/example/package-lock.json
index 8ab267cc..d72cffdc 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -10701,13 +10701,13 @@
     "react-flow-renderer": {
       "version": "file:..",
       "requires": {
-        "@welldone-software/why-did-you-render": "^4.2.0",
+        "@welldone-software/why-did-you-render": "^4.2.1",
         "classnames": "^2.2.6",
         "d3-selection": "^1.4.1",
         "d3-zoom": "^1.8.3",
         "easy-peasy": "^3.3.0",
         "fast-deep-equal": "^3.1.1",
-        "react-draggable": "^4.3.1",
+        "react-draggable": "^4.4.2",
         "resize-observer": "^1.0.0"
       },
       "dependencies": {
diff --git a/example/src/Basic/index.js b/example/src/Basic/index.js
index 5edc5ce6..002ef268 100644
--- a/example/src/Basic/index.js
+++ b/example/src/Basic/index.js
@@ -49,6 +49,7 @@ const BasicFlow = () => {
       onNodeDragStop={onNodeDragStop}
       style={{ width: '100%', height: '100%' }}
       backgroundType="lines"
+      className="react-flow-basic-example"
     >
       <button
         onClick={updatePos}
diff --git a/example/src/Edges/index.js b/example/src/Edges/index.js
index ddc6e4ed..be0f8027 100644
--- a/example/src/Edges/index.js
+++ b/example/src/Edges/index.js
@@ -18,7 +18,7 @@ const initialElements = [
   { id: '6', type: 'output', data: { label: 'Output 6' }, position: { x: 50, y: 550 } },
   { id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
   { id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
-  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge' },
+  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)' },
   { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
   { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
   { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
diff --git a/package-lock.json b/package-lock.json
index 0b58f578..d88952b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2821,12 +2821,12 @@
       "dev": true
     },
     "@octokit/plugin-rest-endpoint-methods": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-3.8.0.tgz",
-      "integrity": "sha512-LUkTgZ53adPFC/Hw6mxvAtShUtGy3zbpcfCAJMWAN7SvsStV4p6TK7TocSv0Aak4TNmDLhbShTagGhpgz9mhYw==",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-3.11.0.tgz",
+      "integrity": "sha512-D31cBYhlOt6Om2xNkCNZUjyWdaDKUfa4HwpLwL8Dnu8aDuVuuOPLUhFMUDE0GvfqlNQFrNtU7n5HaZm+KmRdsw==",
       "dev": true,
       "requires": {
-        "@octokit/types": "^2.12.1",
+        "@octokit/types": "^2.16.0",
         "deprecation": "^2.3.1"
       }
     },
@@ -2875,33 +2875,35 @@
       }
     },
     "@octokit/rest": {
-      "version": "17.6.0",
-      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-17.6.0.tgz",
-      "integrity": "sha512-knh+4hPBA26AMXflFRupTPT3u9NcQmQzeBJl4Gcuf14Gn7dUh6Loc1ICWF0Pz18A6ElFZQt+wB9tFINSruIa+g==",
+      "version": "17.9.0",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-17.9.0.tgz",
+      "integrity": "sha512-Ff2jwS2OizWVaiCozOJevQ97V+mKjlQAt//lU6a/lhWDfHsZLXm/k1RsyTKVbyuiriDi7pg899wCU59nYfKnmQ==",
       "dev": true,
       "requires": {
         "@octokit/core": "^2.4.3",
         "@octokit/plugin-paginate-rest": "^2.2.0",
         "@octokit/plugin-request-log": "^1.0.0",
-        "@octokit/plugin-rest-endpoint-methods": "3.8.0"
+        "@octokit/plugin-rest-endpoint-methods": "3.11.0"
       }
     },
     "@octokit/types": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.15.0.tgz",
-      "integrity": "sha512-0mnpenB8rLhBVu8VUklp38gWi+EatjvcEcLWcdProMKauSaQWWepOAybZ714sOGsEyhXPlIcHICggn8HUsCXVw==",
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
+      "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
       "dev": true,
       "requires": {
         "@types/node": ">= 8"
       }
     },
     "@rollup/pluginutils": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.8.tgz",
-      "integrity": "sha512-rYGeAc4sxcZ+kPG/Tw4/fwJODC3IXHYDH4qusdN/b6aLw5LPUbzpecYbEJh4sVQGPFJxd2dBU4kc1H3oy9/bnw==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.10.tgz",
+      "integrity": "sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==",
       "dev": true,
       "requires": {
-        "estree-walker": "^1.0.1"
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
       },
       "dependencies": {
         "estree-walker": {
@@ -3841,9 +3843,9 @@
       "dev": true
     },
     "@welldone-software/why-did-you-render": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-4.2.0.tgz",
-      "integrity": "sha512-vTy5wmcSvaYSellZX6mZeJHgpntKS/9ZBUxvbswoa5NMoL62F3I8di6CfojFUx42N4n0NapCARJhcMAvupI4IQ==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-4.2.1.tgz",
+      "integrity": "sha512-Q1jH++Sx0F09bU2eTEzAPuBxPiv/uxzgFfWMX1G8LqT4xzdGOrr287DD3lsfPpGLDLx9sqL8jMc0RoxorRewUg==",
       "requires": {
         "lodash": "^4"
       }
@@ -4030,25 +4032,75 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.7.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.6.tgz",
-      "integrity": "sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==",
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.0.tgz",
+      "integrity": "sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.11.1",
-        "caniuse-lite": "^1.0.30001039",
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001061",
         "chalk": "^2.4.2",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.27",
-        "postcss-value-parser": "^4.0.3"
+        "postcss": "^7.0.30",
+        "postcss-value-parser": "^4.1.0"
       },
       "dependencies": {
+        "browserslist": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
+          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001043",
+            "electron-to-chromium": "^1.3.413",
+            "node-releases": "^1.1.53",
+            "pkg-up": "^2.0.0"
+          }
+        },
         "caniuse-lite": {
-          "version": "1.0.30001043",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001043.tgz",
-          "integrity": "sha512-MrBDRPJPDBYwACtSQvxg9+fkna5jPXhJlKmuxenl/ml9uf8LHKlDmLpElu+zTW/bEz7lC1m0wTDD7jiIB+hgFg==",
+          "version": "1.0.30001061",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001061.tgz",
+          "integrity": "sha512-SMICCeiNvMZnyXpuoO+ot7FHpMVPlrsR+HmfByj6nY4xYDHXLqMTbgH7ecEkDNXWkH1vaip+ZS0D7VTXwM1KYQ==",
           "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.441",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.441.tgz",
+          "integrity": "sha512-leBfJwLuyGs1jEei2QioI+PjVMavmUIvPYidE8dCCYWLAq0uefhN3NYgDNb8WxD3uiUNnJ3ScMXg0upSlwySzQ==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.30",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.30.tgz",
+          "integrity": "sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -4728,9 +4780,9 @@
       "dev": true
     },
     "cacheable-lookup": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-4.3.0.tgz",
-      "integrity": "sha512-PTUoCeIjj2awloqyVRUL33SjquU1Qv5xuDalYY8WAzd9NnUMUivZnGsOzVsMfg2YuMsWXaXkd/hjnsVoWc/3YA==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.3.tgz",
+      "integrity": "sha512-W+JBqF9SWe18A72XFzN/V/CULFzPm7sBXzzR6ekkE+3tLG72wFZrBiBZhrZuDoYexop4PHJVdFAKb/Nj9+tm9w==",
       "dev": true
     },
     "cacheable-request": {
@@ -5709,18 +5761,18 @@
       "dev": true
     },
     "decompress-response": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-5.0.0.tgz",
-      "integrity": "sha512-TLZWWybuxWgoW7Lykv+gq9xvzOsUjQ9tF09Tj6NSTYGMTCHNXzrPnD6Hi+TgZq19PyTAGH4Ll/NIM/eTGglnMw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
       "dev": true,
       "requires": {
-        "mimic-response": "^2.0.0"
+        "mimic-response": "^3.1.0"
       },
       "dependencies": {
         "mimic-response": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
-          "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+          "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
           "dev": true
         }
       }
@@ -6269,9 +6321,9 @@
       "dev": true
     },
     "fastq": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.7.0.tgz",
-      "integrity": "sha512-YOadQRnHd5q6PogvAR/x62BGituF2ufiEA6s8aavQANw5YKHERI4AREboX6KotzP8oX2klxYF2wcV/7bn1clfQ==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
+      "integrity": "sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==",
       "dev": true,
       "requires": {
         "reusify": "^1.0.4"
@@ -6570,20 +6622,20 @@
       }
     },
     "got": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-11.1.0.tgz",
-      "integrity": "sha512-9lZDzFe43s6HH60tSurUk04kEtssfLiIfMiY5lSE0+vVaDCmT7+0xYzzlHY5VArSiz41mQQC38LefW2KoE9erw==",
+      "version": "11.1.4",
+      "resolved": "https://registry.npmjs.org/got/-/got-11.1.4.tgz",
+      "integrity": "sha512-z94KIXHhFSpJONuY6C6w1wC+igE7P1d0b5h3H2CvrOXn0/tum/OgFblIGUAxI5PBXukGLvKb9MJXVHW8vsYaBA==",
       "dev": true,
       "requires": {
-        "@sindresorhus/is": "^2.1.0",
-        "@szmarczak/http-timer": "^4.0.0",
+        "@sindresorhus/is": "^2.1.1",
+        "@szmarczak/http-timer": "^4.0.5",
         "@types/cacheable-request": "^6.0.1",
         "@types/responselike": "^1.0.0",
-        "cacheable-lookup": "^4.1.1",
+        "cacheable-lookup": "^5.0.3",
         "cacheable-request": "^7.0.1",
-        "decompress-response": "^5.0.0",
-        "get-stream": "^5.0.0",
-        "http2-wrapper": "^1.0.0-beta.4.4",
+        "decompress-response": "^6.0.0",
+        "get-stream": "^5.1.0",
+        "http2-wrapper": "^1.0.0-beta.4.5",
         "lowercase-keys": "^2.0.0",
         "p-cancelable": "^2.0.0",
         "responselike": "^2.0.0"
@@ -9526,9 +9578,9 @@
       }
     },
     "react-draggable": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.3.1.tgz",
-      "integrity": "sha512-m8QeV+eIi7LhD5mXoLqDzLbokc6Ncwa0T34fF6uJzWSs4vc4fdZI/XGqHYoEn91T8S6qO+BSXslONh7Jz9VPQQ==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.2.tgz",
+      "integrity": "sha512-zLQs4R4bnBCGnCVTZiD8hPsHtkiJxgMpGDlRESM+EHQo8ysXhKJ2GKdJ8UxxLJdRVceX1j19jy+hQS2wHislPQ==",
       "requires": {
         "classnames": "^2.2.5",
         "prop-types": "^15.6.0"
@@ -9663,25 +9715,25 @@
       }
     },
     "release-it": {
-      "version": "13.5.8",
-      "resolved": "https://registry.npmjs.org/release-it/-/release-it-13.5.8.tgz",
-      "integrity": "sha512-5CNuQgkXWcskAediHpnVaU2sOT+27tOeLz8+SXsPHFrdkaCfRKVL1Isekp4AylWmN3sbx2K+cI7Dg6RwtLSYYg==",
+      "version": "13.6.1",
+      "resolved": "https://registry.npmjs.org/release-it/-/release-it-13.6.1.tgz",
+      "integrity": "sha512-y7RfD4+O+I3WwWkULH5Y4kqcBr1bzQ8dNYnG8/7LVycWBajkFSDbKdCper9VGZulpFcXiSFfhenXrnGrDlHMnA==",
       "dev": true,
       "requires": {
         "@iarna/toml": "2.2.5",
-        "@octokit/rest": "17.6.0",
+        "@octokit/rest": "17.9.0",
         "async-retry": "1.3.1",
         "chalk": "4.0.0",
         "cosmiconfig": "6.0.0",
         "debug": "4.1.1",
         "deprecated-obj": "1.0.1",
         "detect-repo-changelog": "1.0.1",
-        "execa": "4.0.0",
+        "execa": "4.0.1",
         "find-up": "4.1.0",
         "form-data": "3.0.0",
         "git-url-parse": "11.1.2",
         "globby": "11.0.0",
-        "got": "11.1.0",
+        "got": "11.1.4",
         "import-cwd": "3.0.0",
         "inquirer": "7.1.0",
         "is-ci": "2.0.0",
@@ -9697,19 +9749,10 @@
         "url-join": "4.0.1",
         "uuid": "8.0.0",
         "window-size": "1.1.1",
-        "yaml": "1.9.2",
+        "yaml": "1.10.0",
         "yargs-parser": "18.1.3"
       },
       "dependencies": {
-        "@babel/runtime": {
-          "version": "7.9.6",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
-          "integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
-          "dev": true,
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
         "ansi-styles": {
           "version": "4.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
@@ -9770,9 +9813,9 @@
           }
         },
         "execa": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-4.0.0.tgz",
-          "integrity": "sha512-JbDUxwV3BoT5ZVXQrSVbAiaXhXUkIwvbhPIwZ0N13kX+5yCzOhUNdocxB/UQRuYOHRYYwAxKYwJYc0T4D12pDA==",
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-4.0.1.tgz",
+          "integrity": "sha512-SCjM/zlBdOK8Q5TIjOn6iEHZaPHFsMoTxXQ2nvUvtPnuohz3H2dIozSg+etNR98dGoYUp2ENSKLL/XaMmbxVgw==",
           "dev": true,
           "requires": {
             "cross-spawn": "^7.0.0",
@@ -9867,12 +9910,6 @@
           "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
           "dev": true
         },
-        "regenerator-runtime": {
-          "version": "0.13.5",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
-          "dev": true
-        },
         "resolve-from": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -9925,13 +9962,10 @@
           }
         },
         "yaml": {
-          "version": "1.9.2",
-          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.9.2.tgz",
-          "integrity": "sha512-HPT7cGGI0DuRcsO51qC1j9O16Dh1mZ2bnXwsi0jrSpsLz0WxOLSLXfkABVl6bZO629py3CU+OMJtpNHDLB97kg==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.9.2"
-          }
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
+          "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
+          "dev": true
         }
       }
     },
@@ -10105,9 +10139,9 @@
       }
     },
     "rollup": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.9.1.tgz",
-      "integrity": "sha512-kEZn76R0j+WD4AActu5Np4RShNlewTtJhdUaWNtHwHnAA8AOapyXgH6O7NL2RkcQLHnl49oz1xW1VrDcu5yP+Q==",
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.10.2.tgz",
+      "integrity": "sha512-tivFM8UXBlYOUqpBYD3pRktYpZvK/eiCQ190eYlrAyrpE/lzkyG2gbawroNdbwmzyUc7Y4eT297xfzv0BDh9qw==",
       "dev": true,
       "requires": {
         "fsevents": "~2.1.2"
@@ -10398,16 +10432,16 @@
       }
     },
     "rollup-plugin-typescript2": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.27.0.tgz",
-      "integrity": "sha512-SRKG/Canve3cxBsqhY1apIBznqnX9X/WU3Lrq3XSwmTmFqccj3+//logLXFEmp+PYFNllSVng+f4zjqRTPKNkA==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.27.1.tgz",
+      "integrity": "sha512-RJl77Bbj1EunAQDC3dK/O2HWuSUX3oJbRGzyLoS5o9W4Hs1Nix3Gavqj1Lzs5Y6Ff4H2xXfmZ1WWUQCYocSbzQ==",
       "dev": true,
       "requires": {
         "@rollup/pluginutils": "^3.0.8",
         "find-cache-dir": "^3.3.1",
         "fs-extra": "8.1.0",
         "resolve": "1.15.1",
-        "tslib": "1.11.1"
+        "tslib": "1.11.2"
       },
       "dependencies": {
         "find-cache-dir": {
@@ -10422,9 +10456,9 @@
           }
         },
         "make-dir": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.2.tgz",
-          "integrity": "sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
           "dev": true,
           "requires": {
             "semver": "^6.0.0"
@@ -10446,9 +10480,9 @@
           "dev": true
         },
         "tslib": {
-          "version": "1.11.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz",
-          "integrity": "sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==",
+          "version": "1.11.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.2.tgz",
+          "integrity": "sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg==",
           "dev": true
         }
       }
@@ -11110,9 +11144,9 @@
       }
     },
     "typescript": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
-      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.2.tgz",
+      "integrity": "sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==",
       "dev": true
     },
     "uglify-js": {
diff --git a/package.json b/package.json
index 12d8dbfd..d1492722 100644
--- a/package.json
+++ b/package.json
@@ -23,13 +23,13 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@welldone-software/why-did-you-render": "^4.2.0",
+    "@welldone-software/why-did-you-render": "^4.2.1",
     "classnames": "^2.2.6",
     "d3-selection": "^1.4.1",
     "d3-zoom": "^1.8.3",
     "easy-peasy": "^3.3.0",
     "fast-deep-equal": "^3.1.1",
-    "react-draggable": "^4.3.1",
+    "react-draggable": "^4.4.2",
     "resize-observer": "^1.0.0"
   },
   "devDependencies": {
@@ -41,7 +41,7 @@
     "@types/d3": "^5.7.2",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
-    "autoprefixer": "^9.7.6",
+    "autoprefixer": "^9.8.0",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
     "cypress": "^4.5.0",
@@ -49,8 +49,8 @@
     "prettier": "2.0.5",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "release-it": "^13.5.8",
-    "rollup": "^2.9.1",
+    "release-it": "^13.6.1",
+    "rollup": "^2.10.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-commonjs": "^10.1.0",
@@ -61,10 +61,10 @@
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.27.0",
+    "rollup-plugin-typescript2": "^0.27.1",
     "rollup-plugin-uglify": "^6.0.4",
     "start-server-and-test": "^1.11.0",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.2"
   },
   "peerDependencies": {
     "react": "^16.13.1"
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 44df5852..2789ccaf 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -12,7 +12,7 @@ import useD3Zoom from '../../hooks/useD3Zoom';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
 import { getDimensions } from '../../utils';
-import { fitView, zoomIn, zoomOut } from '../../utils/graph';
+import { fitView, zoomIn, zoomOut, project } from '../../utils/graph';
 import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc, Node, Edge, Connection } from '../../types';
 
 export interface GraphViewProps {
@@ -115,6 +115,7 @@ const GraphView = memo(
           fitView,
           zoomIn,
           zoomOut,
+          project,
         });
       }
     }, [state.d3Initialised]);
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index 1285cb58..f9f70697 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, CSSProperties, HTMLAttributes } from 'react';
+import cx from 'classnames';
 import { StoreProvider } from 'easy-peasy';
 
 const nodeEnv: string = process.env.NODE_ENV as string;
@@ -50,6 +51,7 @@ const ReactFlow = ({
   style,
   onElementClick,
   elements = [],
+  className,
   children,
   nodeTypes,
   edgeTypes,
@@ -75,7 +77,7 @@ const ReactFlow = ({
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
 
   return (
-    <div style={style} className="react-flow">
+    <div style={style} className={cx('react-flow', className)}>
       <StoreProvider store={store}>
         <GraphView
           onLoad={onLoad}
@@ -137,6 +139,7 @@ ReactFlow.defaultProps = {
   snapGrid: [16, 16],
   onlyRenderVisibleNodes: true,
   isInteractive: true,
+  className: '',
 };
 
 export default ReactFlow;
diff --git a/src/hooks/useElementUpdater.ts b/src/hooks/useElementUpdater.ts
index e7b67de1..17bdcdfa 100644
--- a/src/hooks/useElementUpdater.ts
+++ b/src/hooks/useElementUpdater.ts
@@ -18,10 +18,10 @@ const useElementUpdater = (elements: Elements): void => {
   const setEdges = useStoreActions((a) => a.setEdges);
 
   useEffect(() => {
-    const nodes = elements.filter(isNode) as Node[];
-    const edges = elements.filter(isEdge).map((e) => parseElement(e)) as Edge[];
+    const nodes: Node[] = elements.filter(isNode);
+    const edges: Edge[] = elements.filter(isEdge).map((e) => parseElement(e) as Edge);
 
-    const nextNodes = nodes.map((propNode) => {
+    const nextNodes: Node[] = nodes.map((propNode) => {
       const existingNode = state.nodes.find((n) => n.id === propNode.id);
 
       if (existingNode) {
@@ -56,8 +56,8 @@ const useElementUpdater = (elements: Elements): void => {
         };
       }
 
-      return parseElement(propNode);
-    }) as Node[];
+      return parseElement(propNode) as Node;
+    });
 
     const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);
     const edgesChanged: boolean = !isEqual(state.edges, edges);
diff --git a/src/types/index.ts b/src/types/index.ts
index bdfb71a4..289121de 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -133,11 +133,13 @@ export type FitViewParams = {
   padding: number;
 };
 export type FitViewFunc = (fitViewOptions: FitViewParams) => void;
+export type ProjectFunc = (position: XYPosition) => XYPosition;
 
 type OnLoadParams = {
   zoomIn: () => void;
   zoomOut: () => void;
   fitView: FitViewFunc;
+  project: ProjectFunc;
 };
 
 export type OnLoadFunc = (params: OnLoadParams) => void;
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index 838c4c58..263f2844 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -3,11 +3,11 @@ import { zoomIdentity } from 'd3-zoom';
 import store from '../store';
 import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box, Connection } from '../types';
 
-export const isEdge = (element: Node | Edge): boolean =>
-  element.hasOwnProperty('source') && element.hasOwnProperty('target');
+export const isEdge = (element: Node | Connection | Edge): element is Edge =>
+  'id' in element && 'source' in element && 'target' in element;
 
-export const isNode = (element: Node | Edge): boolean =>
-  !element.hasOwnProperty('source') && !element.hasOwnProperty('target');
+export const isNode = (element: Node | Connection | Edge): element is Node =>
+  'id' in element && !('source' in element) && !('target' in element);
 
 export const getOutgoers = (node: Node, elements: Elements): Elements => {
   if (!isNode(node)) {
@@ -38,9 +38,8 @@ export const addEdge = (edgeParams: Edge | Connection, elements: Elements): Elem
     throw new Error('Can not create edge. An edge needs a source and a target');
   }
 
-  if (edgeParams.hasOwnProperty('id')) {
-    const edge = { ...edgeParams } as Edge;
-    return elements.concat(edge);
+  if (isEdge(edgeParams)) {
+    return elements.concat({ ...edgeParams });
   }
 
   const edge = {
@@ -75,6 +74,12 @@ export const pointToRendererPoint = (
   return position;
 };
 
+export const project = (position: XYPosition): XYPosition => {
+  const { transform, snapToGrid, snapGrid } = store.getState();
+
+  return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
+};
+
 export const parseElement = (element: Node | Edge): Node | Edge => {
   if (!element.id) {
     throw new Error('All elements (nodes and edges) need to have an id.');
@@ -83,24 +88,24 @@ export const parseElement = (element: Node | Edge): Node | Edge => {
   if (isEdge(element)) {
     return {
       ...element,
+      source: element.source.toString(),
+      target: element.target.toString(),
       id: element.id.toString(),
       type: element.type || 'default',
     };
   }
 
-  const nodeElement = element as Node;
-
   return {
-    ...nodeElement,
-    id: nodeElement.id.toString(),
-    type: nodeElement.type || 'default',
+    ...element,
+    id: element.id.toString(),
+    type: element.type || 'default',
     __rg: {
-      position: nodeElement.position,
+      position: element.position,
       width: null,
       height: null,
       handleBounds: {},
     },
-  };
+  } as Node;
 };
 
 const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({