Adding Adaptive Cards to a React App with Markdown Support

npm install adaptivecards adaptivecards-templating markdown-it

import * as AC from "adaptivecards";
import { useEffect, useRef } from "react";
import { Template } from "adaptivecards-templating";
import MarkdownIt from "markdown-it";

interface AdaptiveCardProps {
	cardPayload: string;
	data?: Record<string, any>;
}

export const AdaptiveCardContainer = ({ cardPayload, data }: AdaptiveCardProps) => {
	const cardContainer = useRef<HTMLDivElement>(null);

	useEffect(() => {
		if (cardPayload) {
			try {
				const template = new Template(cardPayload);

				const expandedTemplate = template.expand({
					$root: data,
				});

				const adaptiveCard = new AC.AdaptiveCard();

				adaptiveCard.hostConfig = new AC.HostConfig({
					supportsInteractivity: true,
				});
				
				// Configure Markdown rendering using markdown-it
				const md = new MarkdownIt();
				AC.AdaptiveCard.onProcessMarkdown = (text, result) => {
					result.outputHtml = md.render(text);
					result.didProcess = true;
				};

				adaptiveCard.parse(expandedTemplate);

				// Render the card and append it to the container
				const renderedCard = adaptiveCard.render();
				if (cardContainer.current) {
					cardContainer.current.innerHTML = "";
					cardContainer.current.appendChild(renderedCard);
				}

				// Handle actions (submit, openUrl, etc.)
				adaptiveCard.onExecuteAction = (action) => {
					if (action instanceof AC.SubmitAction) {
						console.log("Submitted data:", action.data);
					}
				};
			} catch (error) {
				console.log("Error rendering Adaptive Card:", error);
			}
		}
	}, [cardPayload, data]);

	return <div ref={cardContainer} />;
};

import AdaptiveCardComponent from "./AdaptiveCardComponent";

const cardTemplate = {
  type: "AdaptiveCard",
  version: "1.4",
  body: [
    {
      type: "TextBlock",
      text: "**Hello, ${name}!**",
      weight: "Bolder",
      size: "Medium",
    },
    {
      type: "TextBlock",
      text: "_Your favorite color is **{favoriteColor}**._",
    },
    {
      type: "TextBlock",
      text: "- List item one\n- List item two",
    },
    {
      type: "Input.Text",
      id: "userInput",
      placeholder: "Enter something...",
    },
  ],
  actions: [
    {
      type: "Action.Submit",
      title: "Submit",
    },
  ],
};

const data = {
  name: "John Doe",
  favoriteColor: "Blue",
};

const App = () => {
  return (
    <div>
      <h1>Adaptive Cards with Markdown Support</h1>
      <AdaptiveCardComponent cardPayload={cardTemplate} data={data} />
    </div>
  );
};

export default App;

const md = new MarkdownIt();
AC.AdaptiveCard.onProcessMarkdown = (text, result) => {
  result.outputHtml = md.render(text);
  result.didProcess = true;
};