react-google-autocomplete - npm Package Compare versions

Comparing version 1.1.4 to 1.2.4

lib/index.js

@@ -38,2 +38,22 @@ 'use strict';
 
+    _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;
@@ -47,2 +67,4 @@ _this.event = null;
     value: function componentDidMount() {
+      var _this2 = this;
+
       var _props = this.props,
@@ -53,2 +75,3 @@ _props$types = _props.types,
           bounds = _props.bounds,
+          apiKey = _props.apiKey,
           _props$fields = _props.fields,
@@ -69,5 +92,15 @@ fields = _props$fields === undefined ? ['address_components', 'geometry.location', 'place_id', 'formatted_address'] : _props$fields;
 
-      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();
+      }
     }
@@ -77,3 +110,3 @@ }, {
     value: function disableAutofill() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -84,4 +117,4 @@ // Autofill workaround adapted from https://stackoverflow.com/questions/29931712/chrome-autofill-covers-autocomplete-for-google-maps-api-v3/49161445#49161445
           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';
           }
@@ -115,3 +148,4 @@ });
           bounds = _props2.bounds,
-          rest = _objectWithoutProperties(_props2, ['onPlaceSelected', 'types', 'componentRestrictions', 'bounds']);
+          apiKey = _props2.apiKey,
+          rest = _objectWithoutProperties(_props2, ['onPlaceSelected', 'types', 'componentRestrictions', 'bounds', 'apiKey']);
 
@@ -131,3 +165,4 @@ return _react2.default.createElement('input', _extends({ ref: 'input' }, rest));
   fields: _propTypes2.default.array,
-  inputAutocompleteValue: _propTypes2.default.string
+  inputAutocompleteValue: _propTypes2.default.string,
+  apiKey: _propTypes2.default.string
 };
@@ -142,6 +177,6 @@ exports.default = ReactGoogleAutocomplete;
 
-    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;
   }
@@ -152,3 +187,3 @@
     value: function onChange(e) {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -162,5 +197,5 @@ var _props$types2 = this.props.types,
           if (status === 'OK' && predictions && predictions.length > 0) {
-            _this4.props.onOpen(predictions);
+            _this5.props.onOpen(predictions);
           } else {
-            _this4.props.onClose();
+            _this5.props.onClose();
           }
@@ -175,3 +210,3 @@ });
     value: function componentDidMount() {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -182,3 +217,3 @@ if (this.props.input.value) {
           if (status === 'OK') {
-            _this5.refs.input.value = e.formatted_address;
+            _this6.refs.input.value = e.formatted_address;
           }
@@ -191,3 +226,3 @@ });
     value: function render() {
-      var _this6 = this;
+      var _this7 = this;
 
@@ -200,3 +235,3 @@ return _react2.default.createElement(
           onChange: function onChange(e) {
-            _this6.onChange(e);
+            _this7.onChange(e);
           }
@@ -203,0 +238,0 @@ })),

package.json

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

src/index.js

@@ -12,2 +12,3 @@ import React from 'react';
     inputAutocompleteValue: PropTypes.string,
+    apiKey: PropTypes.string
   };
@@ -26,2 +27,3 @@
       bounds,
+      apiKey,
       fields = [
@@ -46,11 +48,19 @@ 'address_components',
 
-    this.autocomplete = new google.maps.places.Autocomplete(
-      this.refs.input,
-      config
-    );
+    const handleAutoComplete = () => {
+      this.autocomplete = new google.maps.places.Autocomplete(
+        this.refs.input,
+        config
+      );
 
-    this.event = this.autocomplete.addListener(
-      'place_changed',
-      this.onSelected.bind(this)
-    );
+      this.event = this.autocomplete.addListener(
+        'place_changed',
+        this.onSelected.bind(this)
+      );
+    };
+
+    if (apiKey) {
+      this.handleLoadScript().then(() => handleAutoComplete());
+    } else {
+      handleAutoComplete();
+    }
   }
@@ -84,2 +94,23 @@
 
+  handleLoadScript = () => {
+    const 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((resolve) => {
+      this.googleMapsScript.addEventListener('load', () => resolve());
+    });
+  };
+
   render() {
@@ -91,2 +122,3 @@ const {
       bounds,
+      apiKey,
       ...rest
@@ -93,0 +125,0 @@ } = this.props;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17655

increased by12.62%

Lines of code

355

increased by17.94%

No dependency changes