Use React component as a modal

App Platform
, ,
2

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:

6 Likes