diff --git a/README.md b/README.md
index 6815d398..b3d6f88b 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# react-graph
\ No newline at end of file
+# react-flow
\ No newline at end of file
diff --git a/cypress/integration/flow/basic.spec.js b/cypress/integration/flow/basic.spec.js
index 2cb5f299..d14880bf 100644
--- a/cypress/integration/flow/basic.spec.js
+++ b/cypress/integration/flow/basic.spec.js
@@ -2,55 +2,55 @@ describe('Basic Flow Rendering', () => {
   it('renders a flow with three nodes', () => {
     cy.visit('/index.html');
 
-    cy.get('.react-graph__renderer');
-    cy.get('.react-graph__node').should('have.length', 4);
-    cy.get('.react-graph__edge').should('have.length', 2);
-    cy.get('.react-graph__node').children('div').children('.react-graph__handle');
+    cy.get('.react-flow__renderer');
+    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');
   });
 
   it('selects a node', () => {
-    cy.get('.react-graph__node:first').click().should('have.class', 'selected');
+    cy.get('.react-flow__node:first').click().should('have.class', 'selected');
   });
 
   it('deselects node', () => {
-    cy.get('.react-graph__renderer').click('bottomRight');
-    cy.get('.react-graph__node:first').should('not.have.class', 'selected');
+    cy.get('.react-flow__renderer').click('bottomRight');
+    cy.get('.react-flow__node:first').should('not.have.class', 'selected');
   });
 
   it('selects an edge', () => {
-    cy.get('.react-graph__edge:first').click().should('have.class', 'selected');
+    cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
   });
 
   it('deselects edge', () => {
-    cy.get('.react-graph__renderer').click('bottomRight');
-    cy.get('.react-graph__edge:first').should('not.have.class', 'selected');
+    cy.get('.react-flow__renderer').click('bottomRight');
+    cy.get('.react-flow__edge:first').should('not.have.class', 'selected');
   });
 
   it('selects all nodes', () => {
     cy.get('body')
       .type('{shift}', { release: false })
-      .get('.react-graph__selectionpane')
+      .get('.react-flow__selectionpane')
       .trigger('mousedown', 'topLeft', { which: 1, force: true })
       .trigger('mousemove', 'bottomRight', { which: 1 })
       .trigger('mouseup', 'bottomRight', { force: true })
-      .get('.react-graph__node')
+      .get('.react-flow__node')
       .should('have.class', 'selected')
-      .get('.react-graph__nodesselection-rect');
+      .get('.react-flow__nodesselection-rect');
   });
 
   it('removes selection', () => {
-    cy.get('.react-graph__renderer').click('bottomRight');
-    cy.get('.react-graph__nodesselection-rect').should('not.exist');
+    cy.get('.react-flow__renderer').click('bottomRight');
+    cy.get('.react-flow__nodesselection-rect').should('not.exist');
   });
 
   it('selects an edge', () => {
-    cy.get('.react-graph__edge:first').click().should('have.class', 'selected');
+    cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
   });
 
   it('drags a node', () => {
-    const styleBeforeDrag = Cypress.$('.react-graph__node:first').css('transform');
+    const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
 
-    cy.drag('.react-graph__node:first', { x: 500, y: 25 })
+    cy.drag('.react-flow__node:first', { x: 500, y: 25 })
       .then($el => {
         const styleAfterDrag = $el.css('transform');
         expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
@@ -58,33 +58,33 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('removes a node', () => {
-    cy.get('.react-graph__node').contains('Node 2').click();
+    cy.get('.react-flow__node').contains('Node 2').click();
     cy.get('body').type('{backspace}');
 
-    cy.get('.react-graph__node').should('have.length', 3);
-    cy.get('.react-graph__edge').should('have.length', 1);
+    cy.get('.react-flow__node').should('have.length', 3);
+    cy.get('.react-flow__edge').should('have.length', 1);
   });
 
   it('connects nodes', () => {
-    cy.get('.react-graph__node')
+    cy.get('.react-flow__node')
       .contains('Node 3')
-      .find('.react-graph__handle.source')
+      .find('.react-flow__handle.source')
       .trigger('mousedown', { which: 1 });
 
-    cy.get('.react-graph__node')
+    cy.get('.react-flow__node')
       .contains('Node 4')
-      .find('.react-graph__handle.target')
+      .find('.react-flow__handle.target')
       .trigger('mousemove')
       .trigger('mouseup', { force: true });
 
-    cy.get('.react-graph__edge').should('have.length', 2);
+    cy.get('.react-flow__edge').should('have.length', 2);
   });
 
   it('removes an edge', () => {
-    cy.get('.react-graph__edge:first').click();
+    cy.get('.react-flow__edge:first').click();
     cy.get('body').type('{backspace}');
 
-    cy.get('.react-graph__edge').should('have.length', 1);
+    cy.get('.react-flow__edge').should('have.length', 1);
   });
 
   it('drags the pane', () => {
@@ -96,27 +96,27 @@ describe('Basic Flow Rendering', () => {
       clientY: Cypress.config('viewportHeight') * 0.7
     };
 
-    const styleBeforeDrag = Cypress.$('.react-graph__nodes').css('transform');
+    const styleBeforeDrag = Cypress.$('.react-flow__nodes').css('transform');
 
     cy.window().then((win) => {
-      cy.get('.react-graph__zoompane')
+      cy.get('.react-flow__zoompane')
         .trigger('mousedown', { which: 1, view: win })
         .trigger('mousemove', newPosition)
         .trigger('mouseup', { force: true, view: win })
         .then(() => {
-          const styleAfterDrag = Cypress.$('.react-graph__nodes').css('transform');
+          const styleAfterDrag = Cypress.$('.react-flow__nodes').css('transform');
           expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
         });
     });
   });
 
   it('zooms the pane', () => {
-    const styleBeforeZoom = Cypress.$('.react-graph__nodes').css('transform');
+    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
 
-    cy.get('.react-graph__zoompane')
+    cy.get('.react-flow__zoompane')
       .trigger('wheel','topLeft', { deltaY: -200 })
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-graph__nodes').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
         expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
       });
   });
diff --git a/dist/ReactGraph.css b/dist/ReactGraph.css
index 1ab30709..4a426a85 100644
--- a/dist/ReactGraph.css
+++ b/dist/ReactGraph.css
@@ -1,17 +1,17 @@
-.react-graph {
+.react-flow {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }
 
-.react-graph__renderer {
+.react-flow__renderer {
   width: 100%;
   height: 100%;
   position: absolute;
 }
 
-.react-graph__zoompane {
+.react-flow__zoompane {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -20,7 +20,7 @@
   z-index: 1;
 }
 
-.react-graph__selectionpane {
+.react-flow__selectionpane {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -29,7 +29,7 @@
   z-index: 2;
 }
 
-.react-graph__selection {
+.react-flow__selection {
   position: absolute;
   top: 0;
   left: 0;
@@ -37,7 +37,7 @@
   border: 1px dotted rgba(0, 89, 220, 0.8);
 }
 
-.react-graph__edges {
+.react-flow__edges {
   position: absolute;
   top: 0;
   left: 0;
@@ -45,18 +45,18 @@
   z-index: 2;
 }
 
-.react-graph__edge {
+.react-flow__edge {
   fill: none;
   stroke: #333;
   stroke-width: 2;
   pointer-events: all;
 }
 
-.react-graph__edge.selected {
+.react-flow__edge.selected {
     stroke: #ff5050;
   }
 
-.react-graph__nodes {
+.react-flow__nodes {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -65,7 +65,7 @@
   transform-origin: 0 0;
 }
 
-.react-graph__node {
+.react-flow__node {
   position: absolute;
   color: #222;
   font-family: sans-serif;
@@ -81,15 +81,15 @@
   transform-origin: 0 0;
 }
 
-.react-graph__node:hover > * {
+.react-flow__node:hover > * {
     box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
   }
 
-.react-graph__node.selected > * {
+.react-flow__node.selected > * {
     box-shadow: 0 0 0 2px #000;
   }
 
-.react-graph__handle {
+.react-flow__handle {
   position: absolute;
   width: 12px;
   height: 12px;
@@ -99,7 +99,7 @@
   border-radius: 50%;
 }
 
-.react-graph__nodesselection {
+.react-flow__nodesselection {
   z-index: 3;
   position: absolute;
   width: 100%;
@@ -110,7 +110,7 @@
   pointer-events: none;
 }
 
-.react-graph__nodesselection-rect {
+.react-flow__nodesselection-rect {
     position: absolute;
     background: rgba(0, 89, 220, 0.08);
     border: 1px dotted rgba(0, 89, 220, 0.8);
diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js
index c44efc4b..c02dc118 100644
--- a/dist/ReactGraph.js
+++ b/dist/ReactGraph.js
@@ -6168,7 +6168,7 @@
   };
 
   var getEdgeId = function getEdgeId(e) {
-    return "react-graph__edge-".concat(e.source, "-").concat(e.target);
+    return "react-flow__edge-".concat(e.source, "-").concat(e.target);
   };
 
   var pointToRendererPoint = function pointToRendererPoint(_ref, transform) {
@@ -6330,7 +6330,7 @@
       transform: "translate(".concat(transform[0], "px,").concat(transform[1], "px) scale(").concat(transform[2], ")")
     };
     return React__default.createElement("div", {
-      className: "react-graph__nodes",
+      className: "react-flow__nodes",
       style: transformStyle
     }, nodes.map(function (d) {
       return renderNode(d, props, state);
@@ -6419,7 +6419,7 @@
     }
 
     var style = props.connectionLineStyle || {};
-    var className = classnames('react-graph__edge', 'connection', props.className);
+    var className = classnames('react-flow__edge', 'connection', props.className);
     var sourceHandle = handleId ? sourceNode.__rg.handleBounds.source.find(function (d) {
       return d.id === handleId;
     }) : sourceNode.__rg.handleBounds.source[0];
@@ -6640,7 +6640,7 @@
     return React__default.createElement("svg", {
       width: width,
       height: height,
-      className: "react-graph__edges"
+      className: "react-flow__edges"
     }, React__default.createElement("g", {
       transform: transformStyle
     }, edges.map(function (e) {
@@ -6668,7 +6668,7 @@
   };
 
   function getMousePosition(evt) {
-    var containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
+    var containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
     return {
       x: evt.clientX - containerBounds.left,
       y: evt.clientY - containerBounds.top
@@ -6752,10 +6752,10 @@
       };
     }, []);
     return React__default.createElement("div", {
-      className: "react-graph__selectionpane",
+      className: "react-flow__selectionpane",
       ref: selectionPane
     }, (rect.draw || rect.fixed) && React__default.createElement("div", {
-      className: "react-graph__selection",
+      className: "react-flow__selection",
       style: {
         width: rect.width,
         height: rect.height,
@@ -33788,7 +33788,7 @@
     };
 
     return React__default.createElement("div", {
-      className: "react-graph__nodesselection",
+      className: "react-flow__nodesselection",
       style: {
         transform: "translate(".concat(x, "px,").concat(y, "px) scale(").concat(k, ")")
       }
@@ -33797,7 +33797,7 @@
       onStart: onStart,
       onDrag: onDrag
     }, React__default.createElement("div", {
-      className: "react-graph__nodesselection-rect",
+      className: "react-flow__nodesselection-rect",
       style: {
         width: state.selectedNodesBbox.width,
         height: state.selectedNodesBbox.height,
@@ -33951,7 +33951,7 @@
       }
     }, [state.d3Initialised]);
     return React__default.createElement("div", {
-      className: "react-graph__renderer",
+      className: "react-flow__renderer",
       ref: rendererNode
     }, React__default.createElement(NodeRenderer, {
       nodeTypes: props.nodeTypes,
@@ -33965,7 +33965,7 @@
       connectionLineType: props.connectionLineType,
       connectionLineStyle: props.connectionLineStyle
     }), shiftPressed && React__default.createElement(UserSelection, null), state.nodesSelectionActive && React__default.createElement(NodesSelection, null), React__default.createElement("div", {
-      className: "react-graph__zoompane",
+      className: "react-flow__zoompane",
       onClick: function onClick() {
         return setNodesSelection({
           isActive: false
@@ -34011,7 +34011,7 @@
         setPosition = _ref.setPosition,
         onConnect = _ref.onConnect,
         isTarget = _ref.isTarget;
-    var containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
+    var containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
     setPosition({
       x: evt.clientX - containerBounds.x,
       y: evt.clientY - containerBounds.y
@@ -34066,7 +34066,7 @@
         rest = _objectWithoutProperties(_ref2, ["type", "nodeId", "onConnect", "position", "setSourceId", "setPosition", "className", "id"]);
 
     var isTarget = type === 'target';
-    var handleClasses = classnames('react-graph__handle', className, position, {
+    var handleClasses = classnames('react-flow__handle', className, position, {
       source: !isTarget,
       target: isTarget
     });
@@ -34168,7 +34168,7 @@
         style = _ref.style;
     return React__default.createElement("div", {
       style: _objectSpread2$1({}, nodeStyles$1, {}, style),
-      className: "react-graph__node-inner"
+      className: "react-flow__node-inner"
     }, data.label, React__default.createElement(Handle, {
       type: "source",
       position: "bottom"
@@ -34334,7 +34334,7 @@
         x: xPos,
         y: yPos
       };
-      var nodeClasses = classnames('react-graph__node', {
+      var nodeClasses = classnames('react-flow__node', {
         selected: selected
       });
       var nodeStyle = {
@@ -34522,7 +34522,7 @@
           type = props.type,
           selected = props.selected,
           onClick = props.onClick;
-      var edgeClasses = classnames('react-graph__edge', {
+      var edgeClasses = classnames('react-flow__edge', {
         selected: selected,
         animated: animated
       });
@@ -34648,7 +34648,7 @@
     }
   }
 
-  var css = ".react-graph {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.react-graph__renderer {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.react-graph__zoompane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n\n.react-graph__selectionpane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n\n.react-graph__selection {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: rgba(0, 89, 220, 0.08);\n  border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.react-graph__edge {\n  fill: none;\n  stroke: #bbb;\n  stroke-width: 2;\n  pointer-events: all;\n}\n\n.react-graph__edge.selected {\n    stroke: #555;\n  }\n\n.react-graph__edge.animated {\n    stroke-dasharray: 5;\n    -webkit-animation: dashdraw 0.5s linear infinite;\n            animation: dashdraw 0.5s linear infinite;\n  }\n\n.react-graph__edge.connection {\n    stroke: '#ddd';\n    pointer-events: none;\n  }\n\n@-webkit-keyframes dashdraw {\n  from {stroke-dashoffset: 10}\n}\n\n@keyframes dashdraw {\n  from {stroke-dashoffset: 10}\n}\n\n.react-graph__nodes {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 3;\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n\n.react-graph__node {\n  position: absolute;\n  color: #222;\n  font-family: sans-serif;\n  font-size: 12px;\n  text-align: center;\n  cursor: -webkit-grab;\n  cursor: grab;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n  }\n\n.react-graph__node.selected > * {\n    box-shadow: 0 0 0 2px #555;\n  }\n\n.react-graph__handle {\n  position: absolute;\n  width: 10px;\n  height: 8px;\n  background: rgba(255, 255, 255, 0.4);\n  cursor: crosshair;\n}\n\n.react-graph__handle.bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 0);\n  }\n\n.react-graph__handle.top {\n    left: 50%;\n    top: 0;\n    transform: translate(-50%, 0);\n  }\n\n.react-graph__handle.left {\n    top: 50%;\n    left: 0;\n    transform: translate(0, -50%);\n\n  }\n\n.react-graph__handle.right {\n    right: 0;\n    top: 50%;\n    transform: translate(0, -50%);\n  }\n\n.react-graph__nodesselection {\n  z-index: 3;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  transform-origin: left top;\n  pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n    position: absolute;\n    background: rgba(0, 89, 220, 0.08);\n    border: 1px dotted rgba(0, 89, 220, 0.8);\n    pointer-events: all;\n  }";
+  var css = ".react-flow {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.react-flow__renderer {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.react-flow__zoompane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n\n.react-flow__selectionpane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n\n.react-flow__selection {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: rgba(0, 89, 220, 0.08);\n  border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-flow__edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.react-flow__edge {\n  fill: none;\n  stroke: #bbb;\n  stroke-width: 2;\n  pointer-events: all;\n}\n\n.react-flow__edge.selected {\n    stroke: #555;\n  }\n\n.react-flow__edge.animated {\n    stroke-dasharray: 5;\n    -webkit-animation: dashdraw 0.5s linear infinite;\n            animation: dashdraw 0.5s linear infinite;\n  }\n\n.react-flow__edge.connection {\n    stroke: '#ddd';\n    pointer-events: none;\n  }\n\n@-webkit-keyframes dashdraw {\n  from {stroke-dashoffset: 10}\n}\n\n@keyframes dashdraw {\n  from {stroke-dashoffset: 10}\n}\n\n.react-flow__nodes {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 3;\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n\n.react-flow__node {\n  position: absolute;\n  color: #222;\n  font-family: sans-serif;\n  font-size: 12px;\n  text-align: center;\n  cursor: -webkit-grab;\n  cursor: grab;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n}\n\n.react-flow__node:hover > * {\n    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n  }\n\n.react-flow__node.selected > * {\n    box-shadow: 0 0 0 2px #555;\n  }\n\n.react-flow__handle {\n  position: absolute;\n  width: 10px;\n  height: 8px;\n  background: rgba(255, 255, 255, 0.4);\n  cursor: crosshair;\n}\n\n.react-flow__handle.bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 0);\n  }\n\n.react-flow__handle.top {\n    left: 50%;\n    top: 0;\n    transform: translate(-50%, 0);\n  }\n\n.react-flow__handle.left {\n    top: 50%;\n    left: 0;\n    transform: translate(0, -50%);\n\n  }\n\n.react-flow__handle.right {\n    right: 0;\n    top: 50%;\n    transform: translate(0, -50%);\n  }\n\n.react-flow__nodesselection {\n  z-index: 3;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  transform-origin: left top;\n  pointer-events: none;\n}\n\n.react-flow__nodesselection-rect {\n    position: absolute;\n    background: rgba(0, 89, 220, 0.08);\n    border: 1px dotted rgba(0, 89, 220, 0.8);\n    pointer-events: all;\n  }";
   styleInject(css);
 
   if (process.env.NODE_ENV !== 'production') {
@@ -34679,7 +34679,7 @@
     }, []);
     return React__default.createElement("div", {
       style: style,
-      className: "react-graph"
+      className: "react-flow"
     }, React__default.createElement(StoreProvider, {
       store: store
     }, React__default.createElement(ElementUpdater$1, {
@@ -34745,7 +34745,7 @@
         transform: s.transform
       };
     });
-    var mapClasses = classnames('react-graph__minimap', className);
+    var mapClasses = classnames('react-flow__minimap', className);
     var nodePositions = state.nodes.map(function (n) {
       return n.__rg.position;
     });
diff --git a/package-lock.json b/package-lock.json
index c6ec34f2..3fffb97e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-graph",
+  "name": "react-flow",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
diff --git a/package.json b/package.json
index fe7ea48e..80347d2a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-graph",
+  "name": "react-flow",
   "version": "1.0.0",
   "module": "dist/ReactGraph.esm.js",
   "browser": "dist/ReactGraph.js",
diff --git a/src/Plugins/MiniMap/index.js b/src/Plugins/MiniMap/index.js
index cac73678..f3e8428a 100644
--- a/src/Plugins/MiniMap/index.js
+++ b/src/Plugins/MiniMap/index.js
@@ -20,7 +20,7 @@ export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd'
     height: s.height,
     nodes: s.nodes,
     transform: s.transform,
-  }));  const mapClasses = classnames('react-graph__minimap', className);
+  }));  const mapClasses = classnames('react-flow__minimap', className);
   const nodePositions = state.nodes.map(n => n.__rg.position);
   const width = style.width || baseStyle.width;
   const height = (state.height / (state.width || 1)) * width;
diff --git a/src/components/ConnectionLine/index.js b/src/components/ConnectionLine/index.js
index 351d0d5b..bc245553 100644
--- a/src/components/ConnectionLine/index.js
+++ b/src/components/ConnectionLine/index.js
@@ -17,7 +17,7 @@ export default (props) => {
   }
 
   const style = props.connectionLineStyle || {};
-  const className = cx('react-graph__edge', 'connection', props.className);
+  const className = cx('react-flow__edge', 'connection', props.className);
 
   const sourceHandle = handleId ? sourceNode.__rg.handleBounds.source.find(d => d.id === handleId) : sourceNode.__rg.handleBounds.source[0];
   const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
diff --git a/src/components/Edges/wrapEdge.js b/src/components/Edges/wrapEdge.js
index 3ff23b76..2fa84b13 100644
--- a/src/components/Edges/wrapEdge.js
+++ b/src/components/Edges/wrapEdge.js
@@ -10,7 +10,7 @@ export default EdgeComponent => {
       id, source, target, type,
       animated, selected, onClick
     } = props;
-    const edgeClasses = cx('react-graph__edge', { selected, animated });
+    const edgeClasses = cx('react-flow__edge', { selected, animated });
     const onEdgeClick = (evt) => {
       if (isInputNode(evt)) {
         return false;
diff --git a/src/components/Handle/BaseHandle.js b/src/components/Handle/BaseHandle.js
index ab375179..27415be5 100644
--- a/src/components/Handle/BaseHandle.js
+++ b/src/components/Handle/BaseHandle.js
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import cx from 'classnames';
 
 function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget }) {
-  const containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
+  const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
 
   setPosition({
     x: evt.clientX - containerBounds.x,
@@ -46,7 +46,7 @@ const BaseHandle = memo(({
 }) => {
   const isTarget = type === 'target';
   const handleClasses = cx(
-    'react-graph__handle',
+    'react-flow__handle',
     className,
     position,
     { source: !isTarget, target: isTarget }
diff --git a/src/components/Nodes/wrapNode.js b/src/components/Nodes/wrapNode.js
index 34091286..68bd30dd 100644
--- a/src/components/Nodes/wrapNode.js
+++ b/src/components/Nodes/wrapNode.js
@@ -97,7 +97,7 @@ export default NodeComponent => {
     } = props;
 
     const position = { x: xPos, y: yPos };
-    const nodeClasses = cx('react-graph__node', { selected });
+    const nodeClasses = cx('react-flow__node', { selected });
     const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
 
     const updateNode = () => {
diff --git a/src/components/NodesSelection/index.js b/src/components/NodesSelection/index.js
index 4720360d..f4bd6958 100644
--- a/src/components/NodesSelection/index.js
+++ b/src/components/NodesSelection/index.js
@@ -60,7 +60,7 @@ export default memo(() => {
 
   return (
     <div
-      className="react-graph__nodesselection"
+      className="react-flow__nodesselection"
       style={{
         transform: `translate(${x}px,${y}px) scale(${k})`
       }}
@@ -71,7 +71,7 @@ export default memo(() => {
         onDrag={onDrag}
       >
         <div
-          className="react-graph__nodesselection-rect"
+          className="react-flow__nodesselection-rect"
           style={{
             width: state.selectedNodesBbox.width,
             height: state.selectedNodesBbox.height,
diff --git a/src/components/UserSelection/index.js b/src/components/UserSelection/index.js
index 529ff979..8b91ec2f 100644
--- a/src/components/UserSelection/index.js
+++ b/src/components/UserSelection/index.js
@@ -12,7 +12,7 @@ const initialRect = {
 };
 
 function getMousePosition(evt) {
-  const containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
+  const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
 
   return {
     x: evt.clientX - containerBounds.left,
@@ -91,12 +91,12 @@ export default memo(() => {
 
   return (
     <div
-      className="react-graph__selectionpane"
+      className="react-flow__selectionpane"
       ref={selectionPane}
     >
       {(rect.draw || rect.fixed) && (
         <div
-          className="react-graph__selection"
+          className="react-flow__selection"
           style={{
             width: rect.width,
             height: rect.height,
diff --git a/src/container/EdgeRenderer/index.js b/src/container/EdgeRenderer/index.js
index 1e457170..a6272873 100644
--- a/src/container/EdgeRenderer/index.js
+++ b/src/container/EdgeRenderer/index.js
@@ -162,7 +162,7 @@ const EdgeRenderer = memo((props) => {
     <svg
       width={width}
       height={height}
-      className="react-graph__edges"
+      className="react-flow__edges"
     >
       <g transform={transformStyle}>
         {edges.map(e => renderEdge(e, props, state))}
diff --git a/src/ReactGraph/index.js b/src/container/Editor/index.js
similarity index 69%
rename from src/ReactGraph/index.js
rename to src/container/Editor/index.js
index d1b6cf1f..5187cfd3 100644
--- a/src/ReactGraph/index.js
+++ b/src/container/Editor/index.js
@@ -6,22 +6,22 @@ if (process.env.NODE_ENV !== 'production') {
   whyDidYouRender(React);
 }
 
-import GraphView from '../container/GraphView';
+import GraphView from '../GraphView';
 
-import DefaultNode from '../components/Nodes/DefaultNode';
-import InputNode from '../components/Nodes/InputNode';
-import OutputNode from '../components/Nodes/OutputNode';
-import { createNodeTypes } from '../container/NodeRenderer/utils';
+import DefaultNode from '../../components/Nodes/DefaultNode';
+import InputNode from '../../components/Nodes/InputNode';
+import OutputNode from '../../components/Nodes/OutputNode';
+import { createNodeTypes } from '../NodeRenderer/utils';
 
-import BezierEdge from '../components/Edges/BezierEdge';
-import StraightEdge from '../components/Edges/StraightEdge';
-import StepEdge from '../components/Edges/StepEdge';
-import { createEdgeTypes } from '../container/EdgeRenderer/utils';
-import store from '../store';
+import BezierEdge from '../../components/Edges/BezierEdge';
+import StraightEdge from '../../components/Edges/StraightEdge';
+import StepEdge from '../../components/Edges/StepEdge';
+import { createEdgeTypes } from '../EdgeRenderer/utils';
+import store from '../../store';
 
-import '../style.css';
+import '../../style.css';
 
-const ReactGraph = ({
+const Editor = ({
   style, onElementClick, elements, children,
   nodeTypes, edgeTypes, onLoad, onMove,
   onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
@@ -31,7 +31,7 @@ const ReactGraph = ({
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
 
   return (
-    <div style={style} className="react-graph">
+    <div style={style} className="react-flow">
       <StoreProvider store={store}>
         <GraphView
           onLoad={onLoad}
@@ -54,9 +54,9 @@ const ReactGraph = ({
   );
 };
 
-ReactGraph.displayName = 'ReactGraph';
+Editor.displayName = 'Editor';
 
-ReactGraph.defaultProps = {
+Editor.defaultProps = {
   onElementClick: () => {},
   onElementsRemove: () => {},
   onNodeDragStop: () => {},
@@ -79,4 +79,4 @@ ReactGraph.defaultProps = {
   selectionKeyCode: 16
 };
 
-export default ReactGraph;
+export default Editor;
diff --git a/src/container/GraphView/index.js b/src/container/GraphView/index.js
index debc50e8..aaabfc7b 100644
--- a/src/container/GraphView/index.js
+++ b/src/container/GraphView/index.js
@@ -66,7 +66,7 @@ const GraphView = memo(({
   useElementUpdater({ elements });
 
   return (
-    <div className="react-graph__renderer" ref={rendererNode}>
+    <div className="react-flow__renderer" ref={rendererNode}>
       <NodeRenderer
         nodeTypes={nodeTypes}
         onElementClick={onElementClick}
@@ -83,7 +83,7 @@ const GraphView = memo(({
       {selectionKeyPressed && <UserSelection />}
       {state.nodesSelectionActive && <NodesSelection />}
       <div
-        className="react-graph__zoompane"
+        className="react-flow__zoompane"
         onClick={onZoomPaneClick}
         ref={zoomPane}
       />
diff --git a/src/container/NodeRenderer/index.js b/src/container/NodeRenderer/index.js
index 4c4639a9..8cedd444 100644
--- a/src/container/NodeRenderer/index.js
+++ b/src/container/NodeRenderer/index.js
@@ -45,7 +45,7 @@ const NodeRenderer = memo((props) => {
 
   return (
     <div
-      className="react-graph__nodes"
+      className="react-flow__nodes"
       style={transformStyle}
     >
       {nodes.map(d => renderNode(d, props, state))}
diff --git a/src/index.js b/src/index.js
index c7e153af..2ec15a60 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
-import ReactGraph from './ReactGraph';
+import ReactFlow from './container/Editor';
 
-export default ReactGraph;
+export default ReactFlow;
 
 export { default as Handle } from './components/Handle';
 export { default as MiniMap } from './plugins/MiniMap';
diff --git a/src/actions.js b/src/store/actions.js
similarity index 99%
rename from src/actions.js
rename to src/store/actions.js
index 25eef0da..099a5c6b 100644
--- a/src/actions.js
+++ b/src/store/actions.js
@@ -1,7 +1,7 @@
 import { action } from 'easy-peasy';
 import isEqual from 'fast-deep-equal';
 
-import { getBoundingBox, getNodesInside, getConnectedEdges } from './utils/graph';
+import { getBoundingBox, getNodesInside, getConnectedEdges } from '../utils/graph';
 
 export default {
   setOnConnect: action((state, onConnect) => {
diff --git a/src/store.js b/src/store/index.js
similarity index 100%
rename from src/store.js
rename to src/store/index.js
diff --git a/src/style.css b/src/style.css
index 3ef1ca16..920d851f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,17 +1,17 @@
-.react-graph {
+.react-flow {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }
 
-.react-graph__renderer {
+.react-flow__renderer {
   width: 100%;
   height: 100%;
   position: absolute;
 }
 
-.react-graph__zoompane {
+.react-flow__zoompane {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -20,7 +20,7 @@
   z-index: 1;
 }
 
-.react-graph__selectionpane {
+.react-flow__selectionpane {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -29,7 +29,7 @@
   z-index: 2;
 }
 
-.react-graph__selection {
+.react-flow__selection {
   position: absolute;
   top: 0;
   left: 0;
@@ -37,7 +37,7 @@
   border: 1px dotted rgba(0, 89, 220, 0.8);
 }
 
-.react-graph__edges {
+.react-flow__edges {
   position: absolute;
   top: 0;
   left: 0;
@@ -45,7 +45,7 @@
   z-index: 2;
 }
 
-.react-graph__edge {
+.react-flow__edge {
   fill: none;
   stroke: #bbb;
   stroke-width: 2;
@@ -70,7 +70,7 @@
   from {stroke-dashoffset: 10}
 }
 
-.react-graph__nodes {
+.react-flow__nodes {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -79,7 +79,7 @@
   transform-origin: 0 0;
 }
 
-.react-graph__node {
+.react-flow__node {
   position: absolute;
   color: #222;
   font-family: sans-serif;
@@ -99,7 +99,7 @@
   }
 }
 
-.react-graph__handle {
+.react-flow__handle {
   position: absolute;
   width: 10px;
   height: 8px;
@@ -133,7 +133,7 @@
   }
 }
 
-.react-graph__nodesselection {
+.react-flow__nodesselection {
   z-index: 3;
   position: absolute;
   width: 100%;
diff --git a/src/utils/graph.js b/src/utils/graph.js
index 7a587374..95feb4cd 100644
--- a/src/utils/graph.js
+++ b/src/utils/graph.js
@@ -26,7 +26,7 @@ export const removeElements = (elements, elementsToRemove) => {
   });
 };
 
-const getEdgeId = (e) => `react-graph__edge-${e.source}-${e.target}`;
+const getEdgeId = (e) => `react-flow__edge-${e.source}-${e.target}`;
 
 const pointToRendererPoint = ({ x, y }, transform) => {
   const rendererX = (x - transform[0]) * (1 / [transform[2]]);