Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 8187ada

Browse files
authoredFeb 13, 2018
Update README.md
1 parent a2a1476 commit 8187ada

File tree

1 file changed

+6
-17
lines changed

1 file changed

+6
-17
lines changed
 

‎README.md

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
- [Installation](#installation)
1515
- [Quick start](#quick-start)
1616
- [Usage](#usage)
17-
* [build with plotly.js](#build-with-plotlyjs)
17+
* [With local plotly.js](#with-local-plotlyjs)
1818
+ [build with webpack](#build-with-webpack)
1919
+ [build with create-react-app](#build-with-create-react-app)
2020
* [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
8585

8686
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.
8787

88-
### Build with plotly.js
88+
### With local plotly.js
8989

9090
[`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.
9191

@@ -96,30 +96,19 @@ $ npm install -S react-plotly.js plotly.js
9696
Since `plotly.js` is a peer dependency, you do not need to require it separately to use it.
9797

9898
#### 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-
import Plot from 'react-plotly.js'
10399

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

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

116104
#### Build with `create-react-app`
105+
117106
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:
118107
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)
119108
2. Declare `Plotly` as a global in [App.js](https://github.com/plotly/react-plotly.js-demo-app/blob/master/src/App.js#L1)
120109
3. Use `createPlotlyComponent()` in [App.js](https://github.com/plotly/react-plotly.js-demo-app/blob/master/src/App.js#L25)
121110

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

124113
### With external plotly.js
125114

0 commit comments

Comments
 (0)
Please sign in to comment.