fix for plotly#30 and plotly#22

nicolaskruchten · nicolaskruchten · commit 7896a4e49d65 · 2018-01-23T16:36:08.000-05:00
diff --git a/README.md b/README.md
@@ -191,16 +191,17 @@ You can see an example of this method in action [here](https://codepen.io/rsreus
 | `data` | `Array` | `[]` | list of trace objects |
 | `layout` | `Object` | `undefined` | layout object |
 | `config` | `Object` | `undefined` | config object |
-| `style`  | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the containing `<div>` |
+| `style`  | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered |
+| `className`  | `string` | `undefined` | applied to the `<div>` into which the plot is rendered |
 | `frames` | `Array` | `undefined` | list of frame objects |
 | `useResizeHandler` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler |
-| `fit` | `Boolean` | `false` | When true, disregards `layout.width` and `layout.height` and fits to the parent div size, updating on `window.resize` |
 | `revision` | `Number` | `undefined` | When provided, causes the plot to update *only* when the revision is incremented. |
 | `debug` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging |
 | `onInitialized` | `Function` | `undefined` | Callback executed after plot is initialized |
 | `onPurge` | `Function` | `undefined` | Callback executed when component unmounts. Unmounting triggers a Plotly.purge event which strips the graphDiv of all plotly.js related information including data and layout. This hook gives application writers a chance to pull data and layout off the DOM. |
 | `onUpdate` | `Function` | `undefined` | Callback executed when a plotly.js API method resolves |
 | `onError` | `Function` | `undefined` | Callback executed when a plotly.js API method rejects |
+| `fit` | `Boolean` | `false` | *deprecated* When true, will set `layout.height` and `layout.width` to the component's parent's size if they are unspecified, and will update them on `window.resize` |
 
 ### Event handler props
 
diff --git a/src/factory.js b/src/factory.js
@@ -264,7 +264,13 @@ export default function plotComponentFactory(Plotly) {
     }
 
     render() {
-      return <div style={this.props.style} ref={this.getRef} />;
+      return (
+        <div
+          style={this.props.style}
+          ref={this.getRef}
+          className={this.props.className}
+        />
+      );
     }
   }
 
@@ -281,6 +287,7 @@ export default function plotComponentFactory(Plotly) {
     onUpdate: PropTypes.func,
     debug: PropTypes.bool,
     style: PropTypes.object,
+    className: PropTypes.string,
     useResizeHandler: PropTypes.bool,
   };
 

Original file line number	Diff line number	Diff line change
`@@ -264,7 +264,13 @@ export default function plotComponentFactory(Plotly) {`
`264`	`264`	`}`
`265`	`265`
`266`	`266`	`render() {`
`267`		`- return <div style={this.props.style} ref={this.getRef} />;`
	`267`	`+ return (`
	`268`	`+ <div`
	`269`	`+ style={this.props.style}`
	`270`	`+ ref={this.getRef}`
	`271`	`+ className={this.props.className}`
	`272`	`+ />`
	`273`	`+ );`
`268`	`274`	`}`
`269`	`275`	`}`
`270`	`276`
`@@ -281,6 +287,7 @@ export default function plotComponentFactory(Plotly) {`
`281`	`287`	`onUpdate: PropTypes.func,`
`282`	`288`	`debug: PropTypes.bool,`
`283`	`289`	`style: PropTypes.object,`
	`290`	`+ className: PropTypes.string,`
`284`	`291`	`useResizeHandler: PropTypes.bool,`
`285`	`292`	`};`
`286`	`293`