You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-17Lines changed: 6 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@
14
14
-[Installation](#installation)
15
15
-[Quick start](#quick-start)
16
16
-[Usage](#usage)
17
-
*[build with plotly.js](#build-with-plotlyjs)
17
+
*[With local plotly.js](#with-local-plotlyjs)
18
18
+[build with webpack](#build-with-webpack)
19
19
+[build with create-react-app](#build-with-create-react-app)
20
20
*[With external plotly.js (for example by `<script>` tag)](#with-external-plotlyjs)
@@ -85,7 +85,7 @@ For a full description of Plotly chart types and attributes see the following re
85
85
86
86
Using this component inside a larger application may require some additional considerations in addition to the simple usage example above. The following sections detail two basic use-cases.
87
87
88
-
### Build with plotly.js
88
+
### With local plotly.js
89
89
90
90
[`plotly.js`](https://github.com/plotly/plotly.js) is a peer dependency of `react-plotly.js`. If you would like to bundle `plotly.js` with the rest of your project and use it in this component, you must install it separately.
Since `plotly.js` is a peer dependency, you do not need to require it separately to use it.
97
97
98
98
#### Build with Webpack
99
-
If you build your project using webpack, you'll have to follow [these instructions](https://github.com/plotly/plotly.js#building-plotlyjs-with-webpack) in order to successfully bundle plotly.js.
100
-
101
-
```javascript
102
-
importPlotfrom'react-plotly.js'
103
99
104
-
render () {
105
-
return<Plot
106
-
data={...}
107
-
layout={...}
108
-
frames={...}
109
-
config={...}
110
-
/>
111
-
}
112
-
```
100
+
If you build your project using webpack, you'll have to follow [these instructions](https://github.com/plotly/plotly.js#building-plotlyjs-with-webpack) in order to successfully bundle plotly.js.
113
101
114
-
If you are building with Webpack but do not have access to the Webpack configuration or if you don't want to configure webpack see [build with `create-react-app`](#build-with-create-react-app).
102
+
If you are building with Webpack but do not have access to the Webpack configuration or if you don't want to configure webpack see next section.
115
103
116
104
#### Build with `create-react-app`
105
+
117
106
In this case, we want to use `react-plotly.js` without building `plotly.js` and use a version of `plotly.js` that is already built (see [building an external plotly.js](#with-external-plotlyjs)). This [demo app](http://react-plotly.js-demo.getforge.io/) was built with `create-react-app` and there 3 basic steps:
118
107
1. Import plotly.js in a `<script>` tag in [public/index.html](https://github.com/plotly/react-plotly.js-demo-app/blob/master/public/index.html#L25)
119
108
2. Declare `Plotly` as a global in [App.js](https://github.com/plotly/react-plotly.js-demo-app/blob/master/src/App.js#L1)
120
109
3. Use `createPlotlyComponent()` in [App.js](https://github.com/plotly/react-plotly.js-demo-app/blob/master/src/App.js#L25)
121
110
122
-
This lets us skip the [specific build configuration](#build-with-webpack) necessary to build `plotly.js` in webpack environments (`create-react-app` uses webpack under the hood).
111
+
This lets us skip the [specific build configuration](#build-with-webpack) necessary to build `plotly.js` in webpack environments (`create-react-app` uses webpack under the hood). However, if you wish to use `create-react-app` with a local plotly.js, you will need to `eject` and follow the Webpack instructions above.
0 commit comments