Skip to content

Commit a403999

Browse files
jontiritilliclaude
andcommitted
feat: add DomoEmbed snippet component for embedding Domo-hosted content
Adds a reusable React component that renders a Domo iframe and auto-resizes via postMessage, avoiding scroll traps and fixed-height limitations. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent deb0262 commit a403999

1 file changed

Lines changed: 34 additions & 0 deletions

File tree

snippets/DomoEmbed.mdx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useEffect, useRef } from "react";
2+
3+
export const DomoEmbed = ({ src, width = "100%", initialHeight = "600" }) => {
4+
const iframeRef = useRef(null);
5+
6+
useEffect(() => {
7+
function handleMessage(event) {
8+
if (
9+
iframeRef.current &&
10+
iframeRef.current.contentWindow === event.source &&
11+
event.data &&
12+
event.data.params &&
13+
event.data.params.height
14+
) {
15+
iframeRef.current.style.height = event.data.params.height + 15 + "px";
16+
}
17+
}
18+
window.addEventListener("message", handleMessage);
19+
return () => window.removeEventListener("message", handleMessage);
20+
}, []);
21+
22+
return (
23+
<iframe
24+
ref={iframeRef}
25+
src={src}
26+
width={width}
27+
height={initialHeight}
28+
marginHeight="0"
29+
marginWidth="0"
30+
frameBorder="0"
31+
style={{ display: "block" }}
32+
/>
33+
);
34+
};

0 commit comments

Comments
 (0)