GD-130: Update React-Geocoder-Autocomplete to support new options

hovsepyan021 · hovsepyan021 · commit 166f05a5cf66 · 2025-11-19T00:26:04.000+04:00
*Fixing useEffect for addFilterByPlace()
*Fix the title of the demo
*Fixing design of Events Demo -&gt; Console output
*Enable lazy loading in Events Demo (to load more places when scrolling)
*Fix autocomplete properties for Address Form Demo
diff --git a/example/public/index.html b/example/public/index.html
@@ -27,7 +27,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>react-geocoder-autocomplete</title>
+    <title>React Geocoder Autocomplete - Demo Collection</title>
   </head>
 
   <body>
diff --git a/example/public/manifest.json b/example/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "react-geocoder-autocomplete",
-  "name": "react-geocoder-autocomplete",
+  "short_name": "React Geocoder",
+  "name": "React Geocoder Autocomplete Demo",
   "icons": [
     {
       "src": "favicon.ico",
diff --git a/example/src/components/AddressFormDemo.js b/example/src/components/AddressFormDemo.js
@@ -244,9 +244,12 @@ const AddressFormDemo = () => {
             </div>
             <div className="autocomplete-container">
               <GeoapifyGeocoderAutocomplete
-                placeholder="Start typing an address…"
+                allowNonVerifiedHouseNumber={true}
+                allowNonVerifiedStreet={true}
+                skipIcons={true}
+                placeholder=" "
+                skipSelectionOnArrowKey={true}
                 placeSelect={onAddressSelected}
-                addDetails={true}
               />
               <p className="search-hint">
                 Use search to start. We'll prefill; you review and complete. Can't find your exact address? <a href="#" onClick={handleEnterManually}>Enter it manually</a>.
diff --git a/example/src/components/EventsShowcaseDemo.css b/example/src/components/EventsShowcaseDemo.css
@@ -106,41 +106,46 @@
 }
 
 .console {
-  background: #1e1e1e;
-  color: #d4d4d4;
-  padding: 15px;
+  background: #0b1526;
+  color: #d7e3ef;
+  padding: 10px;
   border-radius: 8px;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 13px;
-  max-height: 500px;
-  overflow-y: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  max-height: 380px;
+  overflow: auto;
   line-height: 1.6;
+  border: 1px solid #152238;
 }
 
 .console .line {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 8px;
-  padding: 4px 0;
-  border-bottom: 1px solid #2d2d2d;
+  white-space: pre-wrap;
+  border-bottom: 1px dashed rgba(255,255,255,0.06);
+  padding: 6px 4px;
+}
+
+.console .line:last-child {
+  border-bottom: none;
 }
 
 .console .ts {
-  color: #858585;
-  min-width: 100px;
-  font-weight: 600;
+  color: #8fb1d1;
+  margin-right: 8px;
 }
 
 .console .evt {
-  color: #4ec9b0;
-  min-width: 220px;
+  display: inline-block;
+  background: #12243a;
+  color: #a3c7ff;
+  border: 1px solid #223955;
+  border-radius: 6px;
+  padding: 2px 6px;
+  margin-right: 8px;
   font-weight: 600;
 }
 
 .console .payload {
-  color: #ce9178;
-  flex: 1;
-  word-break: break-word;
+  color: #cfe5ff;
 }
 
 .empty-console {
diff --git a/example/src/components/EventsShowcaseDemo.js b/example/src/components/EventsShowcaseDemo.js
@@ -194,6 +194,7 @@ const EventsShowcaseDemo = () => {
               <GeoapifyGeocoderAutocomplete
                 showPlacesByCategoryList={true}
                 enablePlacesByCategoryLazyLoading={true}
+                placesByCategoryLimit={10}
                 limit={8}
                 hidePlacesByCategoryListAfterSelect={true}
                 skipIcons={false}
diff --git a/src/index.tsx b/src/index.tsx
@@ -439,7 +439,7 @@ export const GeoapifyGeocoderAutocomplete = ({
         filterByPlaceValue as string
       );
     }
-  }, [filterByRectValue]);
+  }, [filterByPlaceValue]);
 
   useEffect(() => {
     if (geocoderAutocomplete.current) {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`		`- "short_name": "react-geocoder-autocomplete",`
`3`		`- "name": "react-geocoder-autocomplete",`
	`2`	`+ "short_name": "React Geocoder",`
	`3`	`+ "name": "React Geocoder Autocomplete Demo",`
`4`	`4`	`"icons": [`
`5`	`5`	`{`
`6`	`6`	`"src": "favicon.ico",`
Original file line number	Diff line number	Diff line change
`@@ -439,7 +439,7 @@ export const GeoapifyGeocoderAutocomplete = ({`
`439`	`439`	`filterByPlaceValue as string`
`440`	`440`	`);`
`441`	`441`	`}`
`442`		`- }, [filterByRectValue]);`
	`442`	`+ }, [filterByPlaceValue]);`
`443`	`443`
`444`	`444`	`useEffect(() => {`
`445`	`445`	`if (geocoderAutocomplete.current) {`