added experimental react-js integration sandbox link

Author: anuraghazra

experiments/react-integration/VerlyComponent.js

@@ -0,0 +1,97 @@
+/**
+ * Verly.js
+ * https://github.com/anuraghazra/Verly.js
+ *
+ * @author <http://anuraghazra.github.io>
+ *
+ * this integration is still in beta, i'm experimenting with it
+ *
+ * give Verly.js a Star on github if you liked it
+ */
+import React, { useState, useEffect, useRef } from 'react';
+
+// rect
+export function Rect({ verly, x, y, width, height }) {
+  verly.createBox(x, y, width, height);
+  return null;
+}
+
+// rope
+export function Rope({ verly, x, y, segs, gap, pin }) {
+  verly.createRope(x, y, segs, gap, pin);
+  return null;
+}
+
+// cloth
+export function Cloth({ verly, x, y, width, height, segs, pin }) {
+  verly.createCloth(x, y, width, height, segs, pin);
+  return null;
+}
+
+// hexagon
+export function Hexagon({ verly, x, y, segs, radius, stride1, stride2 }) {
+  verly.createHexagon(x, y, segs, radius, stride1, stride2);
+  return null;
+}
+
+//ragdoll
+export function Ragdoll({ verly, x, y }) {
+  verly.createRagdoll(x, y);
+  return null;
+}
+
+// VerlyEntity
+export function VerlyEntity({ verly, children }) {
+  let entity = new Entity(verly.iterations, verly);
+  let childrenWithProps = React.Children.map(children, child =>
+    React.cloneElement(child, { entity: entity })
+  );
+  verly.addEntity(entity);
+  return childrenWithProps;
+}
+
+// Point
+export function Point({ entity, x, y }) {
+  entity.addPoint(x, y);
+  return null;
+}
+
+// Stick
+export function Stick({ entity, indices }) {
+  entity.addStick(indices[0], indices[1]);
+  return null;
+}
+
+// VerlyStage
+export function VerlyStage({ width, height, iterations, children }) {
+  let canvasRef = useRef();
+  let [verly, setVerly] = useState(null);
+  let [childrenWithProps, setChilds] = useState(null);
+
+  useEffect(() => {
+    let canvas = canvasRef.current;
+    canvas.width = width;
+    canvas.height = height;
+    let ctx = canvas.getContext('2d');
+    let verly = new Verly(iterations, canvas, ctx);
+    // verly.createBox(100, 100, 100, 100);
+    setVerly(verly);
+    let childrenWithProps = React.Children.map(children, child =>
+      React.cloneElement(child, { verly: verly })
+    );
+    setChilds(childrenWithProps);
+
+    function animate() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      verly.update();
+      verly.render();
+      verly.interact();
+
+      requestAnimationFrame(animate);
+    }
+    animate();
+  }, []);
+
+  return <canvas ref={canvasRef}>{childrenWithProps}</canvas>;
+}

experiments/react-integration/index.js

@@ -0,0 +1,68 @@
+/**
+ * Verly.js
+ * https://github.com/anuraghazra/Verly.js
+ *
+ * @author <http://anuraghazra.github.io>
+ *
+ * this integration is still in beta, i'm experimenting with it
+ *
+ * give Verly.js a Star on github if you liked it
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './styles.css';
+
+import {
+  VerlyStage,
+  Rect,
+  VerlyEntity,
+  Stick,
+  Point,
+  Rope,
+  Cloth,
+  Hexagon,
+  Ragdoll
+} from './VerlyComponent';
+
+const MyCustomEntity = ({ verly }) => {
+  return (
+    <VerlyEntity verly={verly}>
+      <Point x={100} y={150} />
+      <Point x={200} y={100} />
+      <Point x={200} y={220} />
+      <Point x={100} y={200} />
+      <Stick indices={[0, 1]} />
+      <Stick indices={[1, 2]} />
+      <Stick indices={[2, 3]} />
+      <Stick indices={[3, 0]} />
+      <Stick indices={[3, 1]} />
+      <Stick indices={[2, 0]} />
+    </VerlyEntity>
+  );
+};
+
+function App() {
+  return (
+    <div>
+      <VerlyStage width={500} height={500} iterations={20}>
+        <Rect x={30} y={100} width={100} height={100} />
+        <Rope x={30} y={100} segs={10} gap={10} pin={0} />
+        <Cloth x={200} y={100} width={200} height={200} segs={15} pin={2} />
+        <Hexagon
+          x={300}
+          y={100}
+          segs={12}
+          stride1={5}
+          stride2={8}
+          radius={50}
+        />
+        <Ragdoll x={300} y={100} />
+        <MyCustomEntity />
+      </VerlyStage>
+    </div>
+  );
+}
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<App />, rootElement);

readme.md

@@ -8,7 +8,6 @@ Easy to integrate verlet physics engine.
 **Read my article on medium about [Making a Verlet Physics Engine in JavaScript](https://medium.com/better-programming/making-a-verlet-physics-engine-in-javascript-1dff066d7bc5)**
 
 
-
 ## cool things made with Verly.js
 - [VerlyRangeSlider](https://anuraghazra.github.io/VerlyRangeSlider/)
 - [Ship](https://anuraghazra.github.io/Verly.js/examples/ship/)
@@ -21,6 +20,9 @@ Easy to integrate verlet physics engine.
 ### want more info? Check out the API **[documentation](https://anuraghazra.github.io/Verly.js/docs)**
 
 
+### *Experimental Reactjs Integration - check out the [sandbox](https://codesandbox.io/s/verlyjs-react-w5kfr)*
+
+
 ## Installation
 
 ```bash