icn3d 3.11.6 → 3.12.0

package/README.md

@@ -19,14 +19,6 @@ The following packages are required as shown in dependency:
 Usage
 --------
 
-* <b>Use icn3d as a 3D Viewer</b>
-
-    To use icn3d as a 3D Viewer, the source code is available in the [iCn3D GitHub page](https://github.com/ncbi/icn3d), not this icn3d npm package. You can following the instruction at [iCn3D Doc](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#HowToUse). The JavaScript code could be as simple as the following:
-    
-    	var cfg = {'mmdbid': '1tup'};
-    	var icn3dui = new icn3d.iCn3DUI(cfg);
-    	icn3dui.show3DStructure();
-
 * <b>Use icn3d to generate Node.js scripts</b>
     
     To use icn3d to generate Node.js scripts, the source code is from this icn3d npm package. As shown in [one example of Node.js script](https://github.com/ncbi/icn3d/blob/master/icn3dnode/interaction2.js), part of the script can be like the following. All classes and functions can be accessed with the variable "icn3dui". The class structure is listed at [iCn3D Doc](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#classstructure).
@@ -38,3 +30,48 @@ Usage
     	let icn3d = require('icn3d');
     	let icn3dui = new icn3d.iCn3DUI({});
 
+* <b>Use icn3d as a 3D Viewer with React</b>
+
+    You can first specify the "dependencies.js" file as follows:
+
+		import * as THREE from 'icn3d/three'
+		import $ from 'jquery'
+		import 'jquery-ui-bundle';
+
+		import 'jquery-ui-bundle/jquery-ui.min.css';
+
+		global.THREE = THREE
+		global.$ = $
+		global.jQuery = $
+    
+	Then specify the "icn3d-viewer.js" file as follows:
+
+		import React, { useEffect } from "react";
+		import './dependencies';
+		
+		import * as icn3d from 'icn3d/module'
+		import * from 'icn3d/css'
+
+		function Icn3dViewer() {
+			useEffect(() => {
+				const cfg = {
+					divid: 'viewer',
+					mobilemenu: true
+				};
+				cfg['mmdbid'] = '1tup';
+				const icn3dui = new icn3d.iCn3DUI(cfg);
+				icn3dui.show3DStructure();
+			}, []);
+			return <div id="viewer"></div>;
+		}
+
+		export default Icn3dViewer;
+
+* <b>Use icn3d as a 3D Viewer with jQuery</b>
+
+    The source code is available in the [iCn3D GitHub page](https://github.com/ncbi/icn3d). You can following the instruction at [iCn3D Doc](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#HowToUse). The JavaScript code could be as simple as the following:
+    
+    	var cfg = {'mmdbid': '1tup'};
+    	var icn3dui = new icn3d.iCn3DUI(cfg);
+    	icn3dui.show3DStructure();
+