Adding a widget to the outside of a map div in react

ClintonLunnUGS — Wed, 08 May 2024 14:56:44 GMT

Hi all,

I am trying put a search widget into a sidebar in my project app, but am running into some issues.

Issues I'm seeing:

when trying to render the SearchBar in my Toolbar component, the search widget seems to get correctly created but never appears in my sidebar.
if I put the SearchBar into the Header component (not a lazy loaded component), it works on page load, but if I save the SearchBar file again, the search bar disappears. See below for how I am implementing the SearchBar.

I've created a github repo to illustrate issues I am seeing. https://github.com/clintonlunn/arcgis-react-template. Any suggestions would be much appreciated.

import Search from "@arcgis/core/widgets/Search.js"; import React, { useContext, useEffect, useRef } from "react"; import { MapContext } from "../contexts/MapProvider"; function SearchBar() { const { view } = useContext(MapContext); const searchDivRef = useRef<HTMLDivElement | null>(null); useEffect(() => { let searchWidget: __esri.widgetsSearch; if (view && searchDivRef.current) { console.log("Creating search widget"); console.log("View:", view); searchWidget = new Search({ view: view, sources: [], container: searchDivRef.current, }); console.log("Search widget:", searchWidget); } else { console.log("View or searchDivRef.current is not available"); } return () => { if (searchWidget && searchWidget.destroy) { searchWidget.destroy(); } } }, [view]); return <div ref={searchDivRef}></div>; } export default SearchBar;

Thank you,

Clinton

Re: Adding a widget to the outside of a map div in react

geo_sunriver — Tue, 12 Aug 2025 20:23:27 GMT

I'd love to see a response to this as well. Currently trying to do something similar.

I'm trying to build a custom directions component that is going to hit a pgRouting service, but I want to grab the data from the esri geocoder search source.

Search Widget -> get address from input -> push lat, lng to the start and stop -> refresh view in postgres to create route.

topic Adding a widget to the outside of a map div in react in ArcGIS JavaScript Maps SDK Questions

Adding a widget to the outside of a map div in react

Re: Adding a widget to the outside of a map div in react