Use React component as a modal

In the new simple react template, can I use a react component as a modal template?
like this:

client.interface.trigger("showModal", {
        title: "Sample Modal",
        template: reactComponent
 })
1 Like

Hey @Matheus_Nunes,

Yes, you can use a react component as a template, but you cannot refer the component name as a template as the template would require a .html instead you can use the instance API like shown below

in that case the template will be index.html since it’s a Single Page app, the component is rendered dynamically based on the location

For eg

App.js will be

import React, { useState, useEffect } from "react";
import "./App.css";
import HelloUser from "./components/HelloUser";
import Modal from "./components/Modal";


const App = () => {
	const [loaded, setLoaded] = useState(false);
	const [child, setChild] = useState(<h3>App is loading</h3>);

	useEffect(() => {
		const script = document.createElement("script");
		script.src = "https://static.freshdev.io/fdk/2.0/assets/fresh_client.js";
		script.addEventListener("load", () => setLoaded(true));
		script.defer = true;
		document.head.appendChild(script);
	}, []);

	useEffect(() => {
		if (!loaded) return;
		app.initialized().then((client) => {
			client.instance.context().then(function (data) {
				let location = data.location;

				if (location === "ticket_sidebar") {
					setChild(<HelloUser client={client} />);
				}
				if (location === "modal") {
					setChild(<Modal client={client} />);
				}
			});
		});
	}, [loaded]);

	return <div>{child}</div>;
};

export default App;

Note:- the above sinppet is long, please use the scroll bar inside the snippet to view the full snippet

and your client.interface.trigger will be

client.interface.trigger("showModal", {
        title: "Sample Modal",
        template: "index.html"
 })

Let us know if you need anymore help/guidance on this.

Hope this helps!

Stay Safe :slight_smile:

3 Likes

Nice, that worked. :tada:
Thank you.

1 Like

I had a problem using this solution, sometimes the function app.initialized() do not reach the resolve and the modal window stay showing the element used to initialize the child. This happens randomly, sometimes the modal is loaded normally.

1 Like

Hey @Matheus_Nunes,

Could you please share a screen grab of this issue?, so we could investigate this further?