update to react 16, add props for ts

Author: davidctj

README.md

@@ -52,7 +52,7 @@ render(){
           ]
         };        
     return (
-        <PlotlyChart data={toJS(this.model_data)}
+        <PlotlyChart data={data}
                      layout={layout}
                      onClick={({points, event}) => console.log(points, event)}>    )
 }

dist/index.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import * as React from 'react';
 export interface IPlotlyChartProps {
+    className?: any;
+    config?: any;
     data: any[];
     layout?: any;
-    config?: any;
     onClick?: (data: {
         points: any;
         event: any;
@@ -24,6 +25,7 @@ export interface IPlotlyChartProps {
         points: any;
         event: any;
     }) => any;
+    style?: any;
 }
 /***
  * Usage:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-plotlyjs-ts",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Typescript-React component for Plotly.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,15 +22,15 @@
     "lodash": "^4.17.4"
   },
   "peerDependencies": {
-    "plotly.js": "^1.30.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "typescript": "^2.5.2"
+    "plotly.js": "^1.31.2",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "typescript": "^2.5.3"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.74",
-    "@types/plotly.js": "^1.28.4",
-    "@types/react": "^16.0.5",
-    "@types/react-dom": "^15.5.4"
+    "@types/lodash": "^4.14.80",
+    "@types/plotly.js": "^1.28.8",
+    "@types/react": "^16.0.18",
+    "@types/react-dom": "^16.0.2"
   }
 }

src/index.tsx

@@ -3,14 +3,16 @@ import * as plotlyInstance from 'plotly.js/dist/plotly.js';
 import {cloneDeep} from 'lodash';
 
 export interface IPlotlyChartProps {
+    className?: any;
+    config?: any;
     data: any[];
     layout?: any;
-    config?: any;
     onClick?: (data: { points: any, event: any }) => any;
     onBeforeHover?: (data: { points: any, event: any }) => any;
     onHover?: (data: { points: any, event: any }) => any;
     onUnHover?: (data: { points: any, event: any }) => any;
     onSelected?: (data: { points: any, event: any }) => any;
+    style?: any;
 }
 
 /***