|
16 | 16 | - [Usage](#usage)
|
17 | 17 | * [With local plotly.js](#with-local-plotlyjs)
|
18 | 18 | + [build with webpack](#build-with-webpack)
|
19 |
| - + [build with create-react-app](#build-with-create-react-app) |
20 | 19 | * [With external plotly.js (for example by `<script>` tag)](#with-external-plotlyjs)
|
| 20 | + + [build with create-react-app](#build-with-create-react-app) |
21 | 21 | * [As a standalone bundle](#as-a-standalone-bundle)
|
22 | 22 | - [API](#api)
|
23 | 23 | * [props](#props)
|
@@ -93,22 +93,27 @@ Using this component inside a larger application may require some additional con
|
93 | 93 | $ npm install -S react-plotly.js plotly.js
|
94 | 94 | ```
|
95 | 95 |
|
96 |
| -Since `plotly.js` is a peer dependency, you do not need to require it separately to use it. |
| 96 | +Since `plotly.js` is a peer dependency, you do not need to require it separately to use it: |
97 | 97 |
|
98 |
| -#### Build with Webpack |
| 98 | +```javascript |
| 99 | +import Plot from 'react-plotly.js' |
99 | 100 |
|
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. |
| 101 | +render () { |
| 102 | + return <Plot |
| 103 | + data={...} |
| 104 | + layout={...} |
| 105 | + frames={...} |
| 106 | + config={...} |
| 107 | + /> |
| 108 | +} |
| 109 | +``` |
101 | 110 |
|
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. |
| 111 | +#### Build with Webpack |
103 | 112 |
|
104 |
| -#### Build with `create-react-app` |
| 113 | +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. |
105 | 114 |
|
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: |
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) |
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) |
109 |
| -3. Use `createPlotlyComponent()` in [App.js](https://github.com/plotly/react-plotly.js-demo-app/blob/master/src/App.js#L25) |
| 115 | +If you are building with Webpack but do not have access to the Webpack configuration (i.e. you are using `create-react-app`) or if you don't want to configure webpack see next section. |
110 | 116 |
|
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. |
112 | 117 |
|
113 | 118 | ### With external plotly.js
|
114 | 119 |
|
@@ -146,6 +151,14 @@ render () {
|
146 | 151 |
|
147 | 152 | **Note**: You must ensure `Plotly` is available before your React app tries to render the component. That could mean perhaps using script tag (without `async` or `defer`) or a utility like [load-script](https://www.npmjs.com/package/load-script).
|
148 | 153 |
|
| 154 | + |
| 155 | +#### Build with `create-react-app` |
| 156 | + |
| 157 | +If you are using `create-react-app` you will not have access to the Webpack configuration unless you choose to `eject`. |
| 158 | + |
| 159 | +* If you do not want to `eject`, you must use an *external* plotly.js using the instructions immediately above. This [demo app](http://react-plotly.js-demo.getforge.io/) was built with `create-react-app` using this approach. |
| 160 | +* If you wish to use `create-react-app` with a *local* plotly.js, you will need to `eject` and follow the Webpack instructions above. |
| 161 | + |
149 | 162 | ### As a standalone bundle
|
150 | 163 |
|
151 | 164 | For quick one-off demos on [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/), you may wish to just load the component directly as a script tag. We don't host the bundle directly, so you should never rely on this to work forever or in production, but you can use a third-party service to load the factory version of the component from, for example, [https://unpkg.com/react-plotly.js@latest/dist/create-plotly-component.js](https://unpkg.com/react-plotly.js@latest/dist/create-plotly-component.js).
|
|
0 commit comments