chore(lib): rename

README.md

@@ -30,7 +30,7 @@ This is a very basic example of how to use react-flow. There are more advanced e
 
 ```javascript
 import React from 'react';
-import Graph from 'react-flow';
+import Graph from 'react-flow-renderer';
 
 const elements = [
   { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

example/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "react-dom": "^16.13.1",
-    "react-flow": "file:../",
+    "react-flow-renderer": "file:../",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1"
   },

example/src/Basic/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge } from 'react-flow';
+import Graph, { removeElements, addEdge } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onLoad = graphInstance => console.log('graph loaded:', graphInstance);

example/src/CustomNode/ColorSelectorNode.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Handle } from 'react-flow';
+import { Handle } from 'react-flow-renderer';
 
 export default ({ data, styles }) => {
   return (

example/src/CustomNode/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-import Graph, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'react-flow';
+import Graph, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
 
 import ColorSelectorNode from './ColorSelectorNode';
 

example/src/Empty/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow';
+import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onLoad = graphInstance => console.log('graph loaded:', graphInstance);

example/src/Inactive/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { MiniMap, Controls } from 'react-flow';
+import Graph, { MiniMap, Controls } from 'react-flow-renderer';
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

example/src/Rich/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow';
+import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onElementClick = element => console.log('click', element);

example/src/Stress/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge, MiniMap } from 'react-flow';
+import Graph, { removeElements, addEdge, MiniMap } from 'react-flow-renderer';
 import { getElements } from './utils';
 
 const onLoad = graph => {