https://github.com/javidalpe/react-with-external-script
High Order Component to load external scripts
https://github.com/javidalpe/react-with-external-script
high-order-component load-script react
Last synced: about 1 month ago
JSON representation
High Order Component to load external scripts
- Host: GitHub
- URL: https://github.com/javidalpe/react-with-external-script
- Owner: javidalpe
- License: mit
- Created: 2018-11-13T15:08:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-13T16:17:42.000Z (over 7 years ago)
- Last Synced: 2025-09-17T19:42:07.670Z (8 months ago)
- Topics: high-order-component, load-script, react
- Language: JavaScript
- Size: 60.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Intro
This [High Order Component](https://reactjs.org/docs/higher-order-components.html) simplifies creating React components whose rendering depends on
dynamically loaded scripts.
Your wrapped React component will be mount once the external script is loaded.
### Installation
To get started, you can simply install it via npm.
```bash
npm i --save react-with-external-script
```
### Example usage
Google Maps Hello World
````javascript
class Map extends React.Component {
componentDidMount() {
// Initialize Google Maps
new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}
render () {
return
}
}
export default withExternalScript('https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap', Map)
````
D3 Hello World
````javascript
class D3Chart extends React.Component {
componentDidMount() {
// Initialize d3 chart
d3.select(".chart").append("span")
.text("Hello, world!");
}
}
render () {
return
}
}
export default withExternalScript('https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js', D3Chart)
````
### Test
````
npm test
````
### License
MIT