Add react example

Enrico Loparco (eloparco) · Enrico Loparco (eloparco) · commit 78f159721920 · 2020-11-22T12:50:33.000+01:00
diff --git a/demo/react.html b/demo/react.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gridstack.js React integration example</title>
+    <link rel="stylesheet" href="demo.css" />
+    <script src="../dist/gridstack.all.js"></script>
+
+    <!-- Scripts to use react inside html -->
+    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+  </head>
+
+  <body>
+    <div id="root"></div>
+  </body>
+
+  <script type="text/babel">
+    class App extends React.Component {
+      state = {
+        count: 0,
+        info: "",
+        items: [
+          { x: 2, y: 1, height: 2 },
+          { x: 2, y: 4, width: 3 },
+          { x: 4, y: 2, width: 1 },
+          { x: 3, y: 1, height: 2 },
+          { x: 0, y: 6, width: 2, height: 2 },
+        ],
+      };
+
+      componentDidMount() {
+        // Provides access to the GridStack instance across the React component.
+        this.grid = GridStack.init({
+          float: true,
+          cellHeight: "70px",
+          minRow: 1,
+        });
+
+        this.grid.on("dragstop", (event, element) => {
+          const node = element.gridstackNode;
+          this.setState({
+            info: `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`,
+          });
+
+          // Clear the info text after a two second timeout.
+          // Clears previous timeout first.
+          window.clearTimeout(this.timerId);
+          this.timerId = window.setTimeout(() => {
+            this.setState({
+              info: "",
+            });
+          }, 2000);
+        });
+      }
+
+      addNewWidget = () => {
+        const node = this.state.items[this.state.count] || {
+          x: Math.round(12 * Math.random()),
+          y: Math.round(5 * Math.random()),
+          width: Math.round(1 + 3 * Math.random()),
+          height: Math.round(1 + 3 * Math.random()),
+        };
+        node.id = node.content = String(this.state.count);
+        this.setState((prevState) => ({
+          count: prevState.count + 1,
+        }));
+        this.grid.addWidget(node);
+      };
+
+      render() {
+        return (
+          <div>
+            <h1>How to integrate GridStack.js with React.js</h1>
+            <p>
+              As with any virtualDOM-based framework, you need to check if React
+              has rendered the DOM (or any updates to it){" "}
+              <strong>before</strong> you initialize GridStack or call its
+              methods. As a basic example, check this component's{" "}
+              <code>mounted</code> hook.
+            </p>
+            <p>
+              If your app requires more complex render logic than the inline
+              template in `addWidget`, consider&nbsp;
+              <a href="https://github.com/gridstack/gridstack.js/tree/develop/doc#makewidgetel">
+                makeWidget
+              </a>
+              &nbsp;to let React deal with DOM rendering.
+            </p>
+            <button type="button" onClick={this.addNewWidget}>
+              Add Widget
+            </button>
+            {this.state.info}
+            <section class="grid-stack"></section>
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(<App />, document.getElementById("root"));
+  </script>
+</html>
