Feat: Add support for language selection (#113)

* feat: add support for language configuration

* feat: update lib files

* feat: bump version to 2.3.0

Author: lacunadream

README.md

@@ -82,6 +82,8 @@ import Autocomplete from "react-google-autocomplete";
 
 - `defaultValue` prop is used for setting up the default value e.g `defaultValue={'Amsterdam'}`.
 
+- `language`: Set [language](https://developers.google.com/maps/documentation/places/web-service/details#PlaceDetailsRequests) to be used for the results. If not specified, Google defaults to load the most appropriate language based on the users location or browser setting.
+
 You can pass any prop specified for the hmtl [input tag](https://www.w3schools.com/tags/tag_input.asp). You can also set [options.fields](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult) prop if you need extra information, now it defaults to basic data in order to control expenses.
 
 ## usePlacesWidget
@@ -160,6 +162,7 @@ The hook has only one config argument.
   - `debounce`: Number of milliseconds to accumulate responses for.
   - `options`: Default [options](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#QueryAutocompletionRequest) which will be passed to every request.
   - `sessionToken`: If true then a [session token](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteSessionToken) will be attached to every request.
+  - `language`: If the language code is set, the results will be returned in the specificed [language](https://developers.google.com/maps/documentation/places/web-service/details#PlaceDetailsRequests)
 
 ### Returned value
 

lib/ReactGoogleAutocomplete.js

@@ -32,15 +32,17 @@ function ReactGoogleAutocomplete(props) {
       options = props.options,
       googleMapsScriptBaseUrl = props.googleMapsScriptBaseUrl,
       refProp = props.refProp,
-      rest = _objectWithoutProperties(props, ["onPlaceSelected", "apiKey", "inputAutocompleteValue", "options", "googleMapsScriptBaseUrl", "refProp"]);
+      language = props.language,
+      rest = _objectWithoutProperties(props, ["onPlaceSelected", "apiKey", "inputAutocompleteValue", "options", "googleMapsScriptBaseUrl", "refProp", "language"]);
 
   var _usePlacesWidget = (0, _usePlacesWidget2.default)({
     ref: refProp,
     googleMapsScriptBaseUrl: googleMapsScriptBaseUrl,
     onPlaceSelected: onPlaceSelected,
     apiKey: apiKey,
     inputAutocompleteValue: inputAutocompleteValue,
-    options: options
+    options: options,
+    language: language
   }),
       ref = _usePlacesWidget.ref;
 
@@ -68,7 +70,8 @@ ReactGoogleAutocomplete.propTypes = {
     radius: _propTypes.default.number,
     sessionToken: _propTypes.default.object,
     types: _propTypes.default.arrayOf(_propTypes.default.string)
-  })
+  }),
+  language: _propTypes.default.string
 };
 
 var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {

lib/usePlacesAutocompleteService.js

@@ -41,8 +41,10 @@ function usePlacesAutocompleteService(_ref) {
       debounce = _ref$debounce === void 0 ? 300 : _ref$debounce,
       _ref$options = _ref.options,
       options = _ref$options === void 0 ? {} : _ref$options,
-      sessionToken = _ref.sessionToken;
-  var googleMapsScriptUrl = "".concat(googleMapsScriptBaseUrl, "?key=").concat(apiKey, "&libraries=places");
+      sessionToken = _ref.sessionToken,
+      language = _ref.language;
+  var languageQueryParam = language ? "&language=".concat(language) : '';
+  var googleMapsScriptUrl = "".concat(googleMapsScriptBaseUrl, "?key=").concat(apiKey, "&libraries=places").concat(languageQueryParam);
 
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),

lib/usePlacesWidget.js

@@ -38,13 +38,15 @@ function usePlacesWidget(props) {
       bounds = _props$options.bounds,
       options = _objectWithoutProperties(_props$options, ["types", "componentRestrictions", "fields", "bounds"]),
       _props$googleMapsScri = props.googleMapsScriptBaseUrl,
-      googleMapsScriptBaseUrl = _props$googleMapsScri === void 0 ? _constants.GOOGLE_MAP_SCRIPT_BASE_URL : _props$googleMapsScri;
+      googleMapsScriptBaseUrl = _props$googleMapsScri === void 0 ? _constants.GOOGLE_MAP_SCRIPT_BASE_URL : _props$googleMapsScri,
+      language = props.language;
 
   var inputRef = (0, _react.useRef)(null);
   var event = (0, _react.useRef)(null);
   var autocompleteRef = (0, _react.useRef)(null);
   var observerHack = (0, _react.useRef)(null);
-  var googleMapsScriptUrl = "".concat(googleMapsScriptBaseUrl, "?libraries=places&key=").concat(apiKey);
+  var languageQueryParam = language ? "&language=".concat(language) : '';
+  var googleMapsScriptUrl = "".concat(googleMapsScriptBaseUrl, "?libraries=places&key=").concat(apiKey).concat(languageQueryParam);
   var handleLoadScript = (0, _react.useCallback)(function () {
     return (0, _utils.loadGoogleMapScript)(googleMapsScriptBaseUrl, googleMapsScriptUrl);
   }, [googleMapsScriptBaseUrl, googleMapsScriptUrl]);

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-google-autocomplete",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "React component for google autocomplete.",
   "main": "index.js",
   "types": "index.d.ts",

package.json

@@ -11,6 +11,7 @@ function ReactGoogleAutocomplete(props) {
     options,
     googleMapsScriptBaseUrl,
     refProp,
+    language,
     ...rest
   } = props;
 
@@ -21,6 +22,7 @@ function ReactGoogleAutocomplete(props) {
     apiKey,
     inputAutocompleteValue,
     options,
+    language
   });
 
   return <input ref={ref} {...rest} />;
@@ -47,6 +49,7 @@ ReactGoogleAutocomplete.propTypes = {
     sessionToken: PropTypes.object,
     types: PropTypes.arrayOf(PropTypes.string),
   }),
+  language: PropTypes.string,
 };
 
 export default forwardRef((props, ref) => (

src/ReactGoogleAutocomplete.js

@@ -4,6 +4,7 @@ interface usePlacesAutocompleteServiceConfig {
   debounce?: number;
   options?: google.maps.places.QueryAutocompletionRequest;
   sessionToken?: boolean;
+  language?: string;
 }
 
 interface usePlacesAutocompleteServiceResponse {

src/usePlacesAutocompleteService.d.ts

@@ -10,8 +10,10 @@ export default function usePlacesAutocompleteService({
   debounce = 300,
   options = {},
   sessionToken,
+  language,
 }) {
-  const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?key=${apiKey}&libraries=places`;
+  const languageQueryParam = language ? `&language=${language}` : '';
+  const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?key=${apiKey}&libraries=places${languageQueryParam}`;
   const [placePredictions, setPlacePredictions] = useState([]);
   const [isPlacePredsLoading, setIsPlacePredsLoading] = useState(false);
   const [placeInputValue, setPlaceInputValue] = useState(null);

src/usePlacesAutocompleteService.js

@@ -22,12 +22,14 @@ export default function usePlacesWidget(props) {
       ...options
     } = {},
     googleMapsScriptBaseUrl = GOOGLE_MAP_SCRIPT_BASE_URL,
+    language,
   } = props;
   const inputRef = useRef(null);
   const event = useRef(null);
   const autocompleteRef = useRef(null);
   const observerHack = useRef(null);
-  const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?libraries=places&key=${apiKey}`;
+  const languageQueryParam = language ? `&language=${language}` : '';
+  const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?libraries=places&key=${apiKey}${languageQueryParam}`;
 
   const handleLoadScript = useCallback(
     () => loadGoogleMapScript(googleMapsScriptBaseUrl, googleMapsScriptUrl),