Community
Select to view content in your preferred language

Using the New Component Structure with React

162
4
a week ago
EmrahAydemir
by
Occasional Contributor
a week ago

Help! <arcgis-fullscreen> Web Component Not Working in React

Hey Esri Community!

I'm trying to migrate from the deprecated Fullscreen widget to the new <arcgis-fullscreen> web component in my React app (using SDK 4.32+), but hitting a wall. The button shows up but stays disabled - no errors, just doesn't respond to clicks.

 

What Fails in React:

return (
  <div className="w-full h-full relative" ref={containerRef}>
    <arcgis-map 
      className="w-full h-full" 
      ref={mapDiv}
    >
      <arcgis-fullscreen 
        position="bottom-right"
      ></arcgis-fullscreen>
    </arcgis-map>
  </div>
);

As you can see in the picture, the button is outside the element and is disabled.

EmrahAydemir_0-1744242371900.png

 

Symptoms:

  • Button appears but looks disabled (grayed out)

  • No console errors

  • No view property warnings

 

How are React devs supposed to connect the view to web components? The docs show vanilla JS examples but React's rendering lifecycle seems to break the expected flow.

Anyone successfully implemented this in React? Is there a secret sauce to wiring up web components with the view instance? Appreciate any tips!

 

0 Kudos
4 Replies
JonathanDawe_BAS
by
Occasional Contributor
a week ago

I don't encounter the issues you are seeing, i wonder if there is some kind of lifecycle rendering issue happening? Are you using React 19 and have everything imported? 

For a React implementation I have a pretty customised setup! I have an example here if it is useful to you: https://github.com/antarctica/embedded-maps/blob/main/src/components/Map/Map.tsx

You will notice I have replaced arcgis-map with a component which wraps it and add some logic to do with setting up a internal (and external context). https://github.com/antarctica/embedded-maps/blob/main/src/lib/arcgis/components/ArcView/ArcMapView.t... 

ReneRubalcava
by
Honored Contributor
a week ago

Like @JonathanDawe_BAS I'm not seeing this behavior either. I modified our React sample to use fullscreen and no issues.

import "@arcgis/map-components/components/arcgis-map";
import "@arcgis/map-components/components/arcgis-fullscreen";

export default function App() {
  return (
    <arcgis-map
      itemId="d5dda743788a4b0688fe48f43ae7beb9"
      onarcgisViewReadyChange={(event) => {
        console.log("MapView ready", event);
      }}
    >
      <arcgis-fullscreen position="top-right"></arcgis-fullscreen>
    </arcgis-map>
  );
}

If you have a github repo, might be able to take a look.

ReneRubalcava
by
Honored Contributor
a week ago

One thing to check, based on your screenshot, it looks like the fullscreen component is outside the arcgis-map component, but not based on your snippet. Make sure you are not using self-closing tags "<arcgis-fullscreen />", this is not valid for Custom Elements and cause issues like this. Also if you're component is outside the arcgis-map component, there is a reference-element attribute you can use to refer to the id or tag name of the arcgis-map component.

EmrahAydemir
by
Occasional Contributor
Sunday

Thank you so much for your help, @JonathanDawe_BAS & @ReneRubalcava. I apologize for the late reply due to my other work commitments. After long hours of coding, I sometimes miss simple details. I had used 3dScene and forgot to add

import "@arcgis/map-components/components/arcgis-scene";

Once I included it, everything worked fine, and it’s now running smoothly. Your answers inspired the solution. Thank you very much! I'm familiar with the old component structure of ArcGIS, but Map Components are a different experience for me...


Just a note: In my initial example where I used

<arcgis-map>

, I’d also overlooked adding the 

 import "@arcgis/map-components/components/arcgis-map";
0 Kudos