add possibillity to style component

NovatecConsulting · Jun 1, 2022 · 25de9fb · 25de9fb
1 parent a9e7b7b
commit 25de9fb
Show file tree

Hide file tree

Showing 3 changed files with 308 additions and 331 deletions.
diff --git a/src/GooglePlacesAutocomplete.tsx b/src/GooglePlacesAutocomplete.tsx
@@ -13,11 +13,12 @@ const GooglePlacesAutocomplete: React.ForwardRefRenderFunction<GooglePlacesAutoc
   apiKey = '',
   apiOptions = {},
   autocompletionRequest = {},
-  debounce = 300,
+  debounce = 100,
   minLengthAutocomplete = 0,
   selectProps = {},
   onLoadFailed = console.error,
   withSessionToken = false,
+  styles = {},
 } : GooglePlacesAutocompleteProps, ref) : React.ReactElement => {
   const [placesService, setPlacesService] = useState<google.maps.places.AutocompleteService | undefined>(undefined);
   const [sessionToken, setSessionToken] = useState<google.maps.places.AutocompleteSessionToken | undefined>(undefined);
@@ -73,7 +74,7 @@ const GooglePlacesAutocomplete: React.ForwardRefRenderFunction<GooglePlacesAutoc
   }, []);
 
   return (
-    <AsyncSelect
+    <AsyncSelect styles={styles}
       {...selectProps}
       loadOptions={fetchSuggestions}
       getOptionValue={({ value }) => value.place_id}

diff --git a/src/GooglePlacesAutocomplete.types.tsx b/src/GooglePlacesAutocomplete.types.tsx
@@ -1,5 +1,6 @@
-import { LoaderOptions } from '@googlemaps/js-api-loader';
-import { Props, OptionTypeBase } from 'react-select';
+import {LoaderOptions} from '@googlemaps/js-api-loader';
+import {OptionTypeBase, Props} from 'react-select';
+import {StylesConfig} from "react-select/src/styles";
 
 export type GooglePlacesAutocompleteHandle = {
   getSessionToken: () => google.maps.places.AutocompleteSessionToken | undefined;
@@ -20,7 +21,9 @@ export interface AutocompletionRequest {
   types?: string[];
 }
 
-export default interface GooglePlacesAutocompleteProps {
+export default interface GooglePlacesAutocompleteProps<
+    OptionType extends OptionTypeBase = { label: string; value: string },
+    IsMulti extends boolean = false> {
   apiKey?: string;
   apiOptions?: Partial<LoaderOptions>;
   autocompletionRequest?: AutocompletionRequest;
@@ -29,4 +32,5 @@ export default interface GooglePlacesAutocompleteProps {
   onLoadFailed?: (error: Error) => void;
   selectProps?: Props<OptionTypeBase>;
   withSessionToken?: boolean;
+  styles?: StylesConfig<OptionType, IsMulti>;
 }