topic Re: How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X in ArcGIS JavaScript Maps SDK Questions

How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

Vara_PrasadM_S — Sun, 26 Feb 2023 08:08:35 GMT

Hi,

I have a React Functional Component. I would like to use this to show in PopUp in JS API 4.X ReactJS based application. I am using React V 17.0. The content from functional component is shown as html string but it is not rendered as html content.

My code snippet:

If anyone has any suggestion, please let me know.

Thank you very much in advance!

With Regards,

Vara Prasad

Re: How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

ReneRubalcava — Sun, 26 Feb 2023 18:07:52 GMT

You can use React Portals for using React components in your Popup.

Here's a blog post on the topic.

It will walk you through the steps for something like this.

import { useEffect } from "react"; import { createPortal } from "react-dom"; const PopupPortal = ({ mountNode, children }) => { const el = document.createElement("div"); useEffect(() => { mountNode.appendChild(el); return () => mountNode.removeChild(el); }, [el, mountNode]); return createPortal(children, el); }; export default PopupPortal;

Re: How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

Vara_PrasadM_S — Mon, 27 Feb 2023 06:59:28 GMT

Hi ReneRubalcava,

Thank you very much for your help. Thank you for the blog and details. I tried to implement this. However, its re loading the whole page when ever I try to open the mapview's popup and not loading any popup. I am still trying to fix it.

Thanks & Regards,

Vara Prasad

Re: How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

LuisSolaRuiz — Thu, 17 Aug 2023 06:48:53 GMT

Hi @Vara_PrasadM_S, did you find any solution?

Re: How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

Vara_PrasadM_S — Thu, 19 Oct 2023 12:28:55 GMT

Hi @LuisSolaRuiz , Sorry for late reply. Could not solve it. So, I coded to construct html string with required css and used that as content. Could not implement as custom component.

Re: How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

LuisSolaRuiz — Thu, 04 Apr 2024 13:48:01 GMT

Hi @Vara_PrasadM_S . Sry for the late response. I find a way to include custom React Components inside esri pop up.

Let me know if you need it. Regards

Re: How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

DevinEPA — Fri, 12 Apr 2024 02:04:49 GMT

Hi, can you please let me know how you did this? Thank you

Re: How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

Vara_PrasadM_S — Fri, 12 Apr 2024 13:53:39 GMT

Hi @LuisSolaRuiz ,

That's amazing. Could you please explain how we can achieve this. Thanks in advance.

With Regards,

Vara Prasad

Re: How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

LuisSolaRuiz — Wed, 17 Apr 2024 06:53:24 GMT

Hi @Vara_PrasadM_S @DevinEPA

Yes, of course. In the layer you want to include the custom component you have to use the attribute popupTemplate adding the content attribute customContent by esri. Then, create a div in the document where your component will render and thanks to root.render, load your component and return the created div. For example:

popupTemplate: { content: [ new CustomContent({ outFields: ['*'], creator: (event) => { const div = document.createElement('div'); if (event) { const { title } = event.graphic.attributes; const { description } = event.graphic.attributes; const root = createRoot(div); root.render( <MapPopup title={title} description={description} />, ); } return div; }, }), ],

Probably you want to customise more your modal, you can do it via css and some properties inside the view to hide some elements, like:

popup: { dockOptions: { buttonEnabled: false, }, visibleElements: { featureNavigation: false, closeButton: false, }, viewModel: { includeDefaultActions: false, }, },

I hope this can solve your doubts!

Re: How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

Vara_PrasadM_S — Mon, 22 Apr 2024 10:53:02 GMT

Thank you very much @LuisSolaRuiz.