AstroでStackblitz SDKを使った埋め込み用Reactコンポーネントを作る

事前に @stackblitz/sdk はインストールしておく

import sdk from "@stackblitz/sdk";
import { useEffect } from "react";

export const StackblitzEmbed = (props: { projectID: string }) => {
  useEffect(() => {
    sdk
      .embedProjectId("stackblitz-embed", props.projectID, {
        openFile: "package.json",
      })
      .then((r) => {
        console.log(r);
      })
      .catch((e) => {
        console.error(e);
      });
  }, []);

  return (
    <div style={{ paddingTop: "15px" }}>
      <div id="stackblitz-embed">Embed Stackblitz editor</div>
    </div>
  );
};

使う側はこんな感じ

---
title: Stackblitz Demo
description: Stackblitz Demo
---
import { StackblitzEmbed } from '../../components/StackblitzEmbed'; 

## Demo

<StackblitzEmbed projectID="vitejs-vite-nrzuxh" client:only />

client:only をつけていないと動かない。