diff --git a/README.md b/README.md index f6340df..09d32b3 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ +![](/docs/example.gif) + ![](https://img.badgesize.io/ErrorPro/react-google-autocomplete/master/lib/index.js?compression=gzip&label=gzip) ![](https://img.badgesize.io/ErrorPro/react-google-autocomplete/master/lib/index.js?compression=brotli&label=brotli) +![](https://badgen.net/npm/dm/react-google-autocomplete?labelColor=49516F&color=8994BC) [![GitHub license](https://img.shields.io/github/license/Naereen/StrapDown.js.svg)](https://GitHub.com/ErrorPro/react-google-autocomplete/master/LICENSE) ## React google autocomplete @@ -130,9 +133,7 @@ const AutocompleteTS: FC = Autocomplete as FC; ``` -### More examples(dynamic props, MaterialUI) how to use the lib could be found in `examples/index.js` - -[Video of the example](https://api.monosnap.com/file/download?id=vIjRwTxVyMj0Sd2Gjhsfie2SPk1y4l) +More examples(dynamic props, MaterialUI) how to use the lib could be found in `docs/examples.js` ### TODO diff --git a/docs/example.gif b/docs/example.gif new file mode 100644 index 0000000..3ad3e4d Binary files /dev/null and b/docs/example.gif differ diff --git a/examples/index.js b/docs/examples.js similarity index 100% rename from examples/index.js rename to docs/examples.js diff --git a/lib/index.js b/lib/index.js index fe72142..32d9d49 100644 --- a/lib/index.js +++ b/lib/index.js @@ -60,6 +60,10 @@ function ReactGoogleAutocomplete(props) { if (scriptElement) { return new Promise(function (resolve) { + // in case we already have a script on the page and it's loaded we resolve + if (typeof google !== "undefined") return resolve(); + + // otherwise we wait until it's loaded and resolve scriptElement.addEventListener("load", function () { return resolve(); }); @@ -165,9 +169,11 @@ ReactGoogleAutocomplete.propTypes = { ref: _propTypes2.default.oneOfType([ // Either a function _propTypes2.default.func, - // Or the instance of a DOM native element (see the note about SSR) + // Or the instance of a DOM native element _propTypes2.default.shape({ current: _propTypes2.default.instanceOf(Element) })]), - autocompleteRef: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.shape({ current: _propTypes2.default.instanceOf(Element) })]), + autocompleteRef: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.shape({ + current: _propTypes2.default.any + })]), googleMapsScriptBaseUrl: _propTypes2.default.string, onPlaceSelected: _propTypes2.default.func, inputAutocompleteValue: _propTypes2.default.string, diff --git a/src/index.js b/src/index.js index 697b696..b00d6a2 100644 --- a/src/index.js +++ b/src/index.js @@ -42,6 +42,10 @@ function ReactGoogleAutocomplete(props) { if (scriptElement) { return new Promise((resolve) => { + // in case we already have a script on the page and it's loaded we resolve + if (typeof google !== "undefined") return resolve(); + + // otherwise we wait until it's loaded and resolve scriptElement.addEventListener("load", () => resolve()); }); } @@ -165,7 +169,9 @@ ReactGoogleAutocomplete.propTypes = { ]), autocompleteRef: PropTypes.oneOfType([ PropTypes.func, - PropTypes.shape({ current: PropTypes.instanceOf(Element) }), + PropTypes.shape({ + current: PropTypes.any, + }), ]), googleMapsScriptBaseUrl: PropTypes.string, onPlaceSelected: PropTypes.func,