Skip to content

Commit 9e0674c

Browse files
Update README.md
1 parent 8187ada commit 9e0674c

File tree

1 file changed

+24
-11
lines changed

1 file changed

+24
-11
lines changed

README.md

+24-11
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
- [Usage](#usage)
1717
* [With local plotly.js](#with-local-plotlyjs)
1818
+ [build with webpack](#build-with-webpack)
19-
+ [build with create-react-app](#build-with-create-react-app)
2019
* [With external plotly.js (for example by `<script>` tag)](#with-external-plotlyjs)
20+
+ [build with create-react-app](#build-with-create-react-app)
2121
* [As a standalone bundle](#as-a-standalone-bundle)
2222
- [API](#api)
2323
* [props](#props)
@@ -93,22 +93,27 @@ Using this component inside a larger application may require some additional con
9393
$ npm install -S react-plotly.js plotly.js
9494
```
9595

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:
9797

98-
#### Build with Webpack
98+
```javascript
99+
import Plot from 'react-plotly.js'
99100

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+
```
101110

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
103112

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.
105114

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.
110116

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.
112117

113118
### With external plotly.js
114119

@@ -146,6 +151,14 @@ render () {
146151

147152
**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).
148153

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+
149162
### As a standalone bundle
150163

151164
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

Comments
 (0)