use-places-autocomplete - npm Package Compare versions

Comparing version 1.7.1 to 1.8.0

dist/index.d.ts

@@ -11,2 +11,3 @@ declare module "use-places-autocomplete" {
     debounce?: number;
+    cache?: number | false;
     googleMaps?: any;
@@ -13,0 +14,0 @@ callbackName?: string;

dist/index.esm.js

@@ -57,2 +57,4 @@ import { useRef, useEffect, useState, useCallback } from 'react';
       debounce = _ref$debounce === void 0 ? 200 : _ref$debounce,
+      _ref$cache = _ref.cache,
+      cache = _ref$cache === void 0 ? 24 * 60 * 60 : _ref$cache,
       googleMaps = _ref.googleMaps,
@@ -116,4 +118,22 @@ callbackName = _ref.callbackName,
       });
-    }); // @ts-expect-error
+    });
+    var cachedData = JSON.parse(sessionStorage.getItem("upa") || "{}");
 
+    if (cache) {
+      cachedData = Object.keys(cachedData).reduce(function (acc, key) {
+        if (cachedData[key].maxAge - Date.now() >= 0) acc[key] = cachedData[key];
+        return acc;
+      }, {});
+
+      if (cachedData[val]) {
+        setSuggestions({
+          loading: false,
+          status: "OK",
+          data: cachedData[val].data
+        });
+        return;
+      }
+    } // @ts-expect-error
+
+
     asRef.current.getPlacePredictions(_extends({}, requestOptionsRef.current, {
@@ -127,2 +147,14 @@ input: val
       });
+
+      if (cache && status === "OK") {
+        cachedData[val] = {
+          data: data,
+          maxAge: Date.now() + cache * 1000
+        };
+
+        try {
+          sessionStorage.setItem("upa", JSON.stringify(cachedData));
+        } catch (error) {// skip exception
+        }
+      }
     });
@@ -129,0 +161,0 @@ }, debounce), [debounce, clearSuggestions]);

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}var n=function(t){var n=e.useRef(t);return e.useEffect((function(){n.current=t})),n},o="💡 use-places-autocomplete: Please provide a place Id when using getDetails() either as a string or as part of an Autocomplete Prediction.";exports.default=function(o){var r,a,u,s=void 0===o?{}:o,c=s.requestOptions,l=s.debounce,i=void 0===l?200:l,d=s.googleMaps,p=s.callbackName,f=s.defaultValue,g=void 0===f?"":f,m=e.useState(!1),v=m[0],w=m[1],h=e.useState(g),P=h[0],y=h[1],b=e.useState({loading:!1,status:"",data:[]}),O=b[0],S=b[1],x=e.useRef(null),_=n(c),k=n(d),C=e.useCallback((function(){var e,t=window.google,n=k.current,o=(null==n?void 0:n.places)||(null==t||null==(e=t.maps)?void 0:e.places);o?(x.current=new o.AutocompleteService,w(!0)):console.error("💡 use-places-autocomplete: Google Maps Places API library must be loaded. See: https://github.com/wellyshen/use-places-autocomplete#load-the-library")}),[]),j=e.useCallback((function(){S({loading:!1,status:"",data:[]})}),[]),A=e.useCallback((r=function(e){e?(S((function(e){return t({},e,{loading:!0})})),x.current.getPlacePredictions(t({},_.current,{input:e}),(function(e,t){S({loading:!1,status:t,data:e||[]})}))):j()},a=i,function(){for(var e=this,t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];null!==u&&(clearTimeout(u),u=null),u=setTimeout((function(){return r.apply(e,n)}),a)}),[i,j]),E=e.useCallback((function(e,t){void 0===t&&(t=!0),y(e),t&&A(e)}),[A]);return e.useEffect((function(){var e=window.google;return k.current||null!=e&&e.maps||!p?C():window[p]=C,function(){window[p]&&delete window[p]}}),[p,C]),{ready:v,value:P,suggestions:O,setValue:E,clearSuggestions:j}},exports.getDetails=function(e){var t=new window.google.maps.places.PlacesService(document.createElement("div"));return e.placeId?new Promise((function(n,o){t.getDetails(e,(function(e,t){"OK"!==t&&o(t),n(e)}))})):(console.error(o),Promise.reject(o))},exports.getGeocode=function(e){var t=new window.google.maps.Geocoder;return new Promise((function(n,o){t.geocode(e,(function(t,r){"OK"!==r&&o(r),!e.address&&e.componentRestrictions&&(console.error("💡 use-places-autocomplete: Please provide an address when using getGeocode() with the componentRestrictions."),n(t)),n(t)}))}))},exports.getLatLng=function(e){return new Promise((function(t,n){try{var o=e.geometry.location,r=o.lat,a=o.lng;t({lat:r(),lng:a()})}catch(e){n(e)}}))},exports.getZipCode=function(e,t){return new Promise((function(n,o){try{var r=null;e.address_components.forEach((function(e){var n=e.long_name,o=e.short_name;e.types.includes("postal_code")&&(r=t?o:n)})),n(r)}catch(e){o(e)}}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}var n=function(t){var n=e.useRef(t);return e.useEffect((function(){n.current=t})),n},o="💡 use-places-autocomplete: Please provide a place Id when using getDetails() either as a string or as part of an Autocomplete Prediction.";exports.default=function(o){var a,r,s,u=void 0===o?{}:o,c=u.requestOptions,i=u.debounce,l=void 0===i?200:i,d=u.cache,p=void 0===d?86400:d,g=u.googleMaps,f=u.callbackName,m=u.defaultValue,v=void 0===m?"":m,w=e.useState(!1),h=w[0],y=w[1],P=e.useState(v),b=P[0],O=P[1],S=e.useState({loading:!1,status:"",data:[]}),x=S[0],k=S[1],A=e.useRef(null),_=n(c),j=n(g),C=e.useCallback((function(){var e,t=window.google,n=j.current,o=(null==n?void 0:n.places)||(null==t||null==(e=t.maps)?void 0:e.places);o?(A.current=new o.AutocompleteService,y(!0)):console.error("💡 use-places-autocomplete: Google Maps Places API library must be loaded. See: https://github.com/wellyshen/use-places-autocomplete#load-the-library")}),[]),D=e.useCallback((function(){k({loading:!1,status:"",data:[]})}),[]),I=e.useCallback((a=function(e){if(e){k((function(e){return t({},e,{loading:!0})}));var n=JSON.parse(sessionStorage.getItem("upa")||"{}");p&&(n=Object.keys(n).reduce((function(e,t){return n[t].maxAge-Date.now()>=0&&(e[t]=n[t]),e}),{}))[e]?k({loading:!1,status:"OK",data:n[e].data}):A.current.getPlacePredictions(t({},_.current,{input:e}),(function(t,o){if(k({loading:!1,status:o,data:t||[]}),p&&"OK"===o){n[e]={data:t,maxAge:Date.now()+1e3*p};try{sessionStorage.setItem("upa",JSON.stringify(n))}catch(e){}}}))}else D()},r=l,function(){for(var e=this,t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];null!==s&&(clearTimeout(s),s=null),s=setTimeout((function(){return a.apply(e,n)}),r)}),[l,D]),E=e.useCallback((function(e,t){void 0===t&&(t=!0),O(e),t&&I(e)}),[I]);return e.useEffect((function(){var e=window.google;return j.current||null!=e&&e.maps||!f?C():window[f]=C,function(){window[f]&&delete window[f]}}),[f,C]),{ready:h,value:b,suggestions:x,setValue:E,clearSuggestions:D}},exports.getDetails=function(e){var t=new window.google.maps.places.PlacesService(document.createElement("div"));return e.placeId?new Promise((function(n,o){t.getDetails(e,(function(e,t){"OK"!==t&&o(t),n(e)}))})):(console.error(o),Promise.reject(o))},exports.getGeocode=function(e){var t=new window.google.maps.Geocoder;return new Promise((function(n,o){t.geocode(e,(function(t,a){"OK"!==a&&o(a),!e.address&&e.componentRestrictions&&(console.error("💡 use-places-autocomplete: Please provide an address when using getGeocode() with the componentRestrictions."),n(t)),n(t)}))}))},exports.getLatLng=function(e){return new Promise((function(t,n){try{var o=e.geometry.location,a=o.lat,r=o.lng;t({lat:a(),lng:r()})}catch(e){n(e)}}))},exports.getZipCode=function(e,t){return new Promise((function(n,o){try{var a=null;e.address_components.forEach((function(e){var n=e.long_name,o=e.short_name;e.types.includes("postal_code")&&(a=t?o:n)})),n(a)}catch(e){o(e)}}))};

package.json

 {
   "name": "use-places-autocomplete",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "React hook for Google Maps Places Autocomplete.",
@@ -85,9 +85,9 @@ "license": "MIT",
     "@rollup/plugin-html": "^0.2.0",
-    "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rollup/plugin-node-resolve": "^11.1.0",
     "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-url": "^6.0.0",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/react-hooks": "^4.0.0",
-    "@types/googlemaps": "^3.43.1",
-    "@types/jest": "^26.0.19",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/react-hooks": "^5.0.3",
+    "@types/googlemaps": "^3.43.2",
+    "@types/jest": "^26.0.20",
     "@types/lodash.debounce": "^4.0.6",
@@ -97,4 +97,4 @@ "@types/react": "^17.0.0",
     "eslint": "^7.2.0",
-    "eslint-config-welly": "^1.8.8",
-    "husky": "^4.3.7",
+    "eslint-config-welly": "^1.8.10",
+    "husky": "^4.3.8",
     "jest": "^26.6.3",
@@ -104,3 +104,3 @@ "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.2",
+    "postcss": "^8.2.4",
     "prettier": "^2.2.1",
@@ -112,3 +112,3 @@ "react": "^17.0.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.36.1",
+    "rollup": "^2.38.0",
     "rollup-plugin-copy": "^3.3.0",
@@ -120,3 +120,3 @@ "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "stylelint": "^13.8.0",
+    "stylelint": "^13.9.0",
     "stylelint-config-prettier": "^8.0.2",
@@ -123,0 +123,0 @@ "stylelint-config-standard": "^20.0.0",

README.md

@@ -7,2 +7,4 @@ # <em><b>USE-PLACES-AUTOCOMPLETE</b></em>
 
+> 👀 Looking for a form library? Give [React Cool Form](https://react-cool-form.netlify.app) a try!
+
 [![build status](https://img.shields.io/github/workflow/status/wellyshen/use-places-autocomplete/CI?style=flat-square)](https://github.com/wellyshen/use-places-autocomplete/actions?query=workflow%3ACI)
@@ -30,2 +32,3 @@ [![coverage status](https://img.shields.io/coveralls/github/wellyshen/use-places-autocomplete?style=flat-square)](https://coveralls.io/github/wellyshen/use-places-autocomplete?branch=master)
 - 🔧 [Utility functions](#utility-functions) to do geocoding and get geographic coordinates using [Google Maps Geocoding API](https://developers.google.com/maps/documentation/javascript/geocoding).
+- 🤑 Built-in [cache mechanism](#cache-data-for-you) for you to save the cost of Google APIs.
 - 💰 Built-in debounce mechanism for you to lower the cost of Google APIs.
@@ -35,3 +38,3 @@ - 🚀 Supports asynchronous Google script loading.
 - ⌨️ Builds a UX-rich component (e.g. [WAI-ARIA compliant](https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#autocomplete) and keyword support) via comprehensive [demo code](https://github.com/wellyshen/use-places-autocomplete/blob/master/demo/App/index.tsx).
-- 🦔 Tiny size ([~ 1.3KB gzipped](https://bundlephobia.com/result?p=use-places-autocomplete)). No external dependencies, aside for the `react`.
+- 🦔 Tiny size ([~ 1.5KB gzipped](https://bundlephobia.com/result?p=use-places-autocomplete)). No external dependencies, aside for the `react`.
 
@@ -222,2 +225,15 @@ ## Requirement
 
+### Cache data for you
+
+By default, this library caches the response data to help you saving the [cost of Google Maps Places API](https://developers.google.com/maps/billing/gmp-billing#ac-per-request) and optimize the search performance as well.
+
+```js
+const methods = usePlacesAutocomplete({
+  // Provide the cache time in seconds, default is 24 hours
+  cache: 24 * 60 * 60,
+});
+```
+
+> The cached data is stored via the [Window.sessionStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage).
+
 ## API
@@ -233,9 +249,10 @@
 
-| Key              | Type   | Default              | Description                                                                                                                                                                                                             |
-| ---------------- | ------ | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `requestOptions` | object |                      | The [request options](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest) of Google Maps Places API except for `input` (e.g. bounds, radius etc.). |
-| `googleMaps`     | object | `window.google.maps` | In case you want to provide your own Google Maps object, pass the `google.maps` to it.                                                                                                                                  |
-| `callbackName`   | string |                      | You can provide a callback name to initialize `usePlacesAutocomplete` after Google script is loaded. It's useful when you [load the script asynchronously](#load-the-library).                                          |
-| `debounce`       | number | `200`                | Number of milliseconds to delay before making a request to Google Maps Places API.                                                                                                                                      |
-| `defaultValue`   | string | `""`                 | Default value for the `input` element.                                                                                                                                                                                  |
+| Key              | Type            | Default              | Description                                                                                                                                                                                                             |
+| ---------------- | --------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `requestOptions` | object          |                      | The [request options](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest) of Google Maps Places API except for `input` (e.g. bounds, radius etc.). |
+| `googleMaps`     | object          | `window.google.maps` | In case you want to provide your own Google Maps object, pass the `google.maps` to it.                                                                                                                                  |
+| `callbackName`   | string          |                      | You can provide a callback name to initialize `usePlacesAutocomplete` after Google script is loaded. It's useful when you [load the script asynchronously](#load-the-library).                                          |
+| `debounce`       | number          | `200`                | Number of milliseconds to delay before making a request to Google Maps Places API.                                                                                                                                      |
+| `cache`          | number \| false | `86400` (24 hours)   | Number of seconds to [cache the response data of Google Maps Places API](#cache-data-for-you).                                                                                                                          |
+| `defaultValue`   | string          | `""`                 | Default value for the `input` element.                                                                                                                                                                                  |
 
@@ -242,0 +259,0 @@ ### Return object

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

43291

increased by5.6%

Lines of code

280

increased by11.55%

Number of lines in readme file

545

increased by3.22%

No dependency changes