Morphのマークダウンファイルでは、Reactコンポーネントを使用することができます。

​
カスタムコンポーネントを作成して、マークダウンファイルで使う

1

tsxファイルを作ってコンポーネントをexportする

srcディレクトリの中にtsxファイルを作成します。おすすめは、 src/components ディレクトリの中に作成することですが、どこでも構いません。

src/components/CustomComponent.tsx
// src/components/CustomComponent.tsx
import React from 'react';

export const CustomComponent: React.FC = () => {
  return (
    <div>
      <h1>Custom Component</h1>
    </div>
  );
};
2

mdxファイルでカスタムコンポーネントを使う

mdxファイルで、相対パスでtsxファイルをimportして使うことができます。

index.mdx
import { CustomComponent } from '../components/CustomComponent';

# カスタムコンポーネントのテスト

<CustomComponent />

​
カスタムコンポーネントから、APIエンドポイントを利用する

カスタムコンポーネントの中から、Python関数を実行するには次のようにします。

このサンプルコードを理解するためには、エイリアス、loadData()、postData()を参照してください。

// src/components/CustomComponent.tsx
import React from "react";
import { loadData } from "@morph-data/components";

const metrics = loadData("example_metrics", "json"); # specify the alias and the format

export const LoadDataComp = () => {
  return (
    <div>
      <h1>Metrics</h1>
      <pre>{JSON.stringify(metrics, null, 2)}</pre>
    </div>
  );
};

const execBatch = postData("example_batch_process");

export const BatchButton = () => {
  const [variables, setVariables] = useState({});
  return (
    <button onClick={() => execBatch.run(variables)}>Execute Python</button>
  );
};
React, JavaScriptの使用Shadcn UIを使う