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

[Vara_PrasadM_S]

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:

let customContent = new CustomContent({ outFields: ["*"],creator: () => {
const div = document.createElement('div');
ReactDOM.render(<PopUpContent/>, div);
return div;
}
});
const template = new PopupTemplate({
				     outFields: ["*"],
				     title: " ",
				     content: [customContent]
				  });
layerObj.popupTemplate = template;
					 

If anyone has any suggestion, please let me know.

Thank you very much in advance!

With Regards,

Vara Prasad

[ReneRubalcava]

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;

[Vara_PrasadM_S]

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

[LuisSolaRuiz]

Hi @Vara_PrasadM_S, did you find any solution? 

[Vara_PrasadM_S]

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.

[LuisSolaRuiz]

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

[DevinEPA]

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

[Vara_PrasadM_S]

Hi @LuisSolaRuiz ,

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

With Regards,

Vara Prasad

[LuisSolaRuiz]

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! 

[Vara_PrasadM_S]

Thank you very much @LuisSolaRuiz.