increased version, new lib build with script load feature

Author: Riley-Brown

lib/index.js

@@ -35,6 +35,26 @@ var ReactGoogleAutocomplete = function (_React$Component) {
 
     var _this = _possibleConstructorReturn(this, (ReactGoogleAutocomplete.__proto__ || Object.getPrototypeOf(ReactGoogleAutocomplete)).call(this, props));
 
+    _this.handleLoadScript = function () {
+      var googleMapsScriptUrl = 'https://maps.googleapis.com/maps/api/js?key=' + _this.props.apiKey + '&libraries=places';
+
+      // Check if script exists already
+      if (document.querySelectorAll('script[src="' + googleMapsScriptUrl + '"]').length > 0) {
+        return Promise.resolve();
+      }
+
+      _this.googleMapsScript = document.createElement('script');
+      _this.googleMapsScript.src = googleMapsScriptUrl;
+
+      document.body.appendChild(_this.googleMapsScript);
+
+      return new Promise(function (resolve) {
+        _this.googleMapsScript.addEventListener('load', function () {
+          return resolve();
+        });
+      });
+    };
+
     _this.autocomplete = null;
     _this.event = null;
     return _this;
@@ -43,11 +63,14 @@ var ReactGoogleAutocomplete = function (_React$Component) {
   _createClass(ReactGoogleAutocomplete, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
+      var _this2 = this;
+
       var _props = this.props,
           _props$types = _props.types,
           types = _props$types === undefined ? ['(cities)'] : _props$types,
           componentRestrictions = _props.componentRestrictions,
           bounds = _props.bounds,
+          apiKey = _props.apiKey,
           _props$fields = _props.fields,
           fields = _props$fields === undefined ? ['address_components', 'geometry.location', 'place_id', 'formatted_address'] : _props$fields;
 
@@ -63,21 +86,31 @@ var ReactGoogleAutocomplete = function (_React$Component) {
 
       this.disableAutofill();
 
-      this.autocomplete = new google.maps.places.Autocomplete(this.refs.input, config);
+      var handleAutoComplete = function handleAutoComplete() {
+        _this2.autocomplete = new google.maps.places.Autocomplete(_this2.refs.input, config);
 
-      this.event = this.autocomplete.addListener('place_changed', this.onSelected.bind(this));
+        _this2.event = _this2.autocomplete.addListener('place_changed', _this2.onSelected.bind(_this2));
+      };
+
+      if (apiKey) {
+        this.handleLoadScript().then(function () {
+          return handleAutoComplete();
+        });
+      } else {
+        handleAutoComplete();
+      }
     }
   }, {
     key: 'disableAutofill',
     value: function disableAutofill() {
-      var _this2 = this;
+      var _this3 = this;
 
       // Autofill workaround adapted from https://stackoverflow.com/questions/29931712/chrome-autofill-covers-autocomplete-for-google-maps-api-v3/49161445#49161445
       if (window.MutationObserver) {
         var observerHack = new MutationObserver(function () {
           observerHack.disconnect();
-          if (_this2.refs && _this2.refs.input) {
-            _this2.refs.input.autocomplete = _this2.props.inputAutocompleteValue || 'new-password';
+          if (_this3.refs && _this3.refs.input) {
+            _this3.refs.input.autocomplete = _this3.props.inputAutocompleteValue || 'new-password';
           }
         });
         observerHack.observe(this.refs.input, {
@@ -106,7 +139,8 @@ var ReactGoogleAutocomplete = function (_React$Component) {
           types = _props2.types,
           componentRestrictions = _props2.componentRestrictions,
           bounds = _props2.bounds,
-          rest = _objectWithoutProperties(_props2, ['onPlaceSelected', 'types', 'componentRestrictions', 'bounds']);
+          apiKey = _props2.apiKey,
+          rest = _objectWithoutProperties(_props2, ['onPlaceSelected', 'types', 'componentRestrictions', 'bounds', 'apiKey']);
 
       return _react2.default.createElement('input', _extends({ ref: 'input' }, rest));
     }
@@ -121,7 +155,8 @@ ReactGoogleAutocomplete.propTypes = {
   componentRestrictions: _propTypes2.default.object,
   bounds: _propTypes2.default.object,
   fields: _propTypes2.default.array,
-  inputAutocompleteValue: _propTypes2.default.string
+  inputAutocompleteValue: _propTypes2.default.string,
+  apiKey: _propTypes2.default.string
 };
 exports.default = ReactGoogleAutocomplete;
 
@@ -131,16 +166,16 @@ var ReactCustomGoogleAutocomplete = exports.ReactCustomGoogleAutocomplete = func
   function ReactCustomGoogleAutocomplete(props) {
     _classCallCheck(this, ReactCustomGoogleAutocomplete);
 
-    var _this3 = _possibleConstructorReturn(this, (ReactCustomGoogleAutocomplete.__proto__ || Object.getPrototypeOf(ReactCustomGoogleAutocomplete)).call(this, props));
+    var _this4 = _possibleConstructorReturn(this, (ReactCustomGoogleAutocomplete.__proto__ || Object.getPrototypeOf(ReactCustomGoogleAutocomplete)).call(this, props));
 
-    _this3.service = new google.maps.places.AutocompleteService();
-    return _this3;
+    _this4.service = new google.maps.places.AutocompleteService();
+    return _this4;
   }
 
   _createClass(ReactCustomGoogleAutocomplete, [{
     key: 'onChange',
     value: function onChange(e) {
-      var _this4 = this;
+      var _this5 = this;
 
       var _props$types2 = this.props.types,
           types = _props$types2 === undefined ? ['(cities)'] : _props$types2;
@@ -149,9 +184,9 @@ var ReactCustomGoogleAutocomplete = exports.ReactCustomGoogleAutocomplete = func
       if (e.target.value) {
         this.service.getPlacePredictions({ input: e.target.value, types: types }, function (predictions, status) {
           if (status === 'OK' && predictions && predictions.length > 0) {
-            _this4.props.onOpen(predictions);
+            _this5.props.onOpen(predictions);
           } else {
-            _this4.props.onClose();
+            _this5.props.onClose();
           }
         });
       } else {
@@ -161,29 +196,29 @@ var ReactCustomGoogleAutocomplete = exports.ReactCustomGoogleAutocomplete = func
   }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
-      var _this5 = this;
+      var _this6 = this;
 
       if (this.props.input.value) {
         this.placeService = new google.maps.places.PlacesService(this.refs.div);
         this.placeService.getDetails({ placeId: this.props.input.value }, function (e, status) {
           if (status === 'OK') {
-            _this5.refs.input.value = e.formatted_address;
+            _this6.refs.input.value = e.formatted_address;
           }
         });
       }
     }
   }, {
     key: 'render',
     value: function render() {
-      var _this6 = this;
+      var _this7 = this;
 
       return _react2.default.createElement(
         'div',
         null,
         _react2.default.cloneElement(this.props.input, _extends({}, this.props, {
           ref: 'input',
           onChange: function onChange(e) {
-            _this6.onChange(e);
+            _this7.onChange(e);
           }
         })),
         _react2.default.createElement('div', { ref: 'div' })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-google-autocomplete",
-  "version": "1.1.4",
+  "version": "1.2.4",
   "description": "React component for google autocomplete.",
   "main": "index.js",
   "scripts": {