Update for yFiles for HTML 2.4.0.0

Author: fskpf

README.md

@@ -8,8 +8,8 @@ This sample application serves as a basic scaffold of how to integrate [yFiles f
 
 ## Version Information
 
-- create-react-app v3.3.0
-- yFiles for HTML 2.3
+- create-react-app v4.0.3
+- yFiles for HTML 2.4
 
 ## Getting Started
 

integration-howto.md

@@ -24,7 +24,7 @@ Adding yFiles as a dependency is as easy as installing an external library from
      ```
      "dependencies": {
        ...
-       "yfiles": "../yFiles-for-HTML-Complete-2.3.0.3-Evaluation/lib-dev/es-modules/yfiles-23.0.2-eval-dev.tgz"
+       "yfiles": "../yFiles-for-HTML-Complete-2.4.0.0-Evaluation/lib-dev/es-modules/yfiles-24.0.0-eval-dev.tgz"
      },
      ```
 
@@ -45,7 +45,6 @@ With the yFiles dependency, you can easily create a new React component that con
    There are two things to look out for:
 
    - Make sure to configure your `license.json` for the library.
-   - Make sure to include `yfiles.css`, which is an integral part of the library. For example add `import 'yfiles/yfiles.css'` as in `ReactGraphComponent.js`.
 
 2. Afterwards, just add the new React component to the `App.js`.
 

package.json

@@ -4,17 +4,18 @@
   "author": "yWorks GmbH <[email protected]>",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.6.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1",
-    "yfiles": "../yFiles-for-HTML-Complete-2.3.0.4-Evaluation/lib-dev/es-modules/yfiles-23.0.4-eval-dev.tgz"
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.1.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^2.0.1",
+    "yfiles": "../yFiles-for-HTML-Complete-2.4.0.0-Evaluation/lib-dev/es-modules/yfiles-24.0.0-eval-dev.tgz"
   },
   "scripts": {
-    "preinstall": "cd ../yFiles-for-HTML-Complete-2.3.0.4-Evaluation && npm run prepare-package",
-    "postinstall": " node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.3.0.4-Evaluation/lib/license.json','./src/license.json')\"",
+    "preinstall": "cd ../yFiles-for-HTML-Complete-2.4.0.0-Evaluation && npm run prepare-package",
+    "postinstall": " node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.4.0.0-Evaluation/lib/license.json','./src/license.json')\"",
     "start": "react-scripts --expose-gc --max-old-space-size=8192 start",
     "build": "react-scripts --expose-gc --max-old-space-size=8192 build",
     "eject": "react-scripts eject"

src/App.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import logo from './yfiles-logo.svg';
-import './App.css';
+import logo from './yfiles-logo.svg'
+import './App.css'
 import ReactGraphComponent from './ReactGraphComponent.js'
 
 function App() {
@@ -10,9 +10,9 @@ function App() {
         <img src={logo} className="App-logo" alt="logo" />
         <h1>A Basic yFiles Integration in React</h1>
       </header>
-      <ReactGraphComponent/>
+      <ReactGraphComponent />
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

src/ReactGraphComponent.js

@@ -1,6 +1,5 @@
-import 'yfiles/yfiles.css'
 import React, { Component } from 'react'
-import {GraphComponent, GraphEditorInputMode, License, Point, Rect} from 'yfiles'
+import { GraphComponent, GraphEditorInputMode, License, Point, Rect } from 'yfiles'
 import licenseData from './license'
 
 License.value = licenseData
@@ -50,7 +49,7 @@ export default class ReactGraphComponent extends Component {
     return (
       <div
         className="graph-component-container"
-        ref={node => {
+        ref={(node) => {
           this.div = node
         }}
       />

src/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'))