react-with-external-script

1.0.0 • Public • Published

Intro

This High Order Component 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.

npm i --save react-with-external-script

Example usage

Google Maps Hello World

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 <div id='map' />
  }
}
 
export default withExternalScript('https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap', Map)

D3 Hello World

class D3Chart extends React.Component {
  componentDidMount() {
      // Initialize d3 chart
      d3.select(".chart").append("span")
          .text("Hello, world!");
    }
  }
  render () {
    return <div className='chart' />
  }
}
 
export default withExternalScript('https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js', D3Chart)

Test

npm test

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i react-with-external-script

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

15.1 kB

Total Files

11

Last publish

Collaborators

  • javidalpe