项目作者: javidalpe

项目描述 :
High Order Component to load external scripts
高级语言: JavaScript
项目地址: git://github.com/javidalpe/react-with-external-script.git
创建时间: 2018-11-13T15:08:57Z
项目社区:https://github.com/javidalpe/react-with-external-script

开源协议:MIT License

下载


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.

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

Example usage

Google Maps Hello World

  1. class Map extends React.Component {
  2. componentDidMount() {
  3. // Initialize Google Maps
  4. new google.maps.Map(document.getElementById('map'), {
  5. center: {lat: -34.397, lng: 150.644},
  6. zoom: 8
  7. });
  8. }
  9. }
  10. render () {
  11. return <div id='map' ></div>
  12. }
  13. }
  14. export default withExternalScript('https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap', Map)

D3 Hello World

  1. class D3Chart extends React.Component {
  2. componentDidMount() {
  3. // Initialize d3 chart
  4. d3.select(".chart").append("span")
  5. .text("Hello, world!");
  6. }
  7. }
  8. render () {
  9. return <div className='chart' ></div>
  10. }
  11. }
  12. export default withExternalScript('https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js', D3Chart)

Test

  1. npm test

License

MIT