refactor(examples): use func components

README.md

@@ -1,6 +1,6 @@
 # :ocean: React Flow
 
-React library for building node-based flow editors.
+React library for building node-based graphs.
 
 # Installation
 
@@ -8,6 +8,23 @@ React library for building node-based flow editors.
 npm install github:wbkd/react-flow
 ```
 
+# Usage
+
+This is a very basic example of how to use react-flow. There are more advanced examples in the [example](/example) folder.
+
+```javascript
+import React from 'react';
+import Graph from 'react-flow';
+
+const elements = [
+  { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+];
+
+const BasicGraph = () => <Graph elements={elements} style={{ width: '100%', height: '100%' }} />;
+```
+
 # Props
 
 - `elements`: array with nodes and edges

example/src/Basic/index.js

@@ -1,67 +1,38 @@
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge, getOutgoers } from 'react-flow';
+import Graph, { removeElements, addEdge } from 'react-flow';
 
 const onNodeDragStop = node => console.log('drag stop', node);
+const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
+const onElementClick = element => console.log('click', element);
 
-class App extends PureComponent {
+const initialElements = [
-  constructor() {
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-    super();
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+];
 
-    this.state = {
+const BasicGraph = () => {
-      graphLoaded: false,
+  const [elements, setElements] = useState(initialElements);
-      elements: [
+  const onElementsRemove = (elementsToRemove) =>
-        { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+    setElements(els => removeElements(elementsToRemove, els));
-        { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  const onConnect = (params) => setElements(els => addEdge(params, els));
-        { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-        { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
-        { id: 'e1-2', source: '1', target: '2', animated: true },
-        { id: 'e1-3', source: '1', target: '3' },
-      ]
-    };
-  }
 
-  onLoad(graphInstance) {
+  return (
-    console.log('graph loaded:', graphInstance);
+    <Graph
-
+      elements={elements}
-    this.graphInstance = graphInstance;
+      onLoad={onLoad}
-    this.setState({
+      onElementClick={onElementClick}
-      graphLoaded: true
+      onElementsRemove={onElementsRemove}
-    });
+      onConnect={onConnect}
-  }
+      onNodeDragStop={onNodeDragStop}
-
+      style={{ width: '100%', height: '100%' }}
-  onElementClick(element) {
+      backgroundType="lines"
-    console.log('click', element);
+    />
-    console.log('outgoers', getOutgoers(element, this.state.elements));
+  );
-  }
-
-  onElementsRemove(elementsToRemove) {
-    this.setState(prevState => ({
-      elements: removeElements(elementsToRemove, prevState.elements)
-    }));
-  }
-
-  onConnect(params) {
-    console.log('connect', params);
-    this.setState(prevState => ({
-      elements: addEdge(params, prevState.elements)
-    }));
-  }
-
-  render() {
-    return (
-      <Graph
-        elements={this.state.elements}
-        onLoad={graphInstance => this.onLoad(graphInstance)}
-        onElementClick={element => this.onElementClick(element)}
-        onElementsRemove={elements => this.onElementsRemove(elements)}
-        onConnect={params => this.onConnect(params)}
-        onNodeDragStop={onNodeDragStop}
-        style={{ width: '100%', height: '100%' }}
-        backgroundType="lines"
-      />
-    );
-  }
 }
 
-export default App;
+export default BasicGraph;

example/src/Empty/index.js

@@ -1,84 +1,48 @@
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge, getOutgoers, MiniMap } from 'react-flow';
+import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow';
 
 const onNodeDragStop = node => console.log('drag stop', node);
+const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
+const onElementClick = element => console.log('click', element);
 
-class App extends PureComponent {
+const EmptyGraph = () => {
-  constructor() {
+  const [elements, setElements] = useState([]);
-    super();
+  const onElementsRemove = (elementsToRemove) =>
-
+    setElements(els => removeElements(elementsToRemove, els));
-    this.state = {
+  const onConnect = (params) => setElements(els => addEdge(params, els));
-      graphLoaded: false,
+  const onAdd = () => {
-      elements: []
+    const nodeId = (elements.length + 1).toString();
+    const newNode = {
+      id: nodeId,
+      data: { label: `Node: ${nodeId}` },
+      position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
     };
-  }
+    setElements(els => els.concat(newNode));
+  };
 
-  onLoad(graphInstance) {
+  return (
-    console.log('graph loaded:', graphInstance);
+    <Graph
-
+      elements={elements}
-    this.graphInstance = graphInstance;
+      onLoad={onLoad}
-    this.setState({
+      onElementClick={onElementClick}
-      graphLoaded: true
+      onElementsRemove={onElementsRemove}
-    });
+      onConnect={p => onConnect(p)}
-  }
+      onNodeDragStop={onNodeDragStop}
-
+      style={{ width: '100%', height: '100%' }}
-  onElementClick(element) {
+      backgroundType="lines"
-    console.log('click', element);
+    >
-    console.log('outgoers', getOutgoers(element, this.state.elements));
+    <MiniMap />
-  }
+    <Controls />
-
+    <button
-  onElementsRemove(elementsToRemove) {
+      type="button"
-    this.setState(prevState => ({
+      onClick={onAdd}
-      elements: removeElements(elementsToRemove, prevState.elements)
+      style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
-    }));
+    >
-  }
+      add
-
+    </button>
-  onConnect(params) {
+    </Graph>
-    console.log('connect', params);
+  );
-    this.setState(prevState => ({
-      elements: addEdge(params, prevState.elements)
-    }));
-  }
-
-  onAdd() {
-    this.setState((prevState) => {
-      const nodeId =  (prevState.elements.length + 1).toString();
-
-      return {
-        ...prevState,
-        elements: prevState.elements.concat({
-          id: nodeId,
-          data: { label: `Node: ${nodeId}` },
-          position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
-        })
-      };
-    });
-  }
-
-  render() {
-    return (
-      <Graph
-        elements={this.state.elements}
-        onLoad={graphInstance => this.onLoad(graphInstance)}
-        onElementClick={element => this.onElementClick(element)}
-        onElementsRemove={elements => this.onElementsRemove(elements)}
-        onConnect={params => this.onConnect(params)}
-        onNodeDragStop={onNodeDragStop}
-        style={{ width: '100%', height: '100%' }}
-        backgroundType="lines"
-      >
-      <MiniMap />
-      <button
-        type="button"
-        onClick={() => this.onAdd()}
-        style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
-      >
-        add
-      </button>
-      </Graph>
-    );
-  }
 }
 
-export default App;
+export default EmptyGraph;