tsxファイルを作ってコンポーネントをexportする
src/components
// src/components/CustomComponent.tsx import React from 'react'; export const CustomComponent: React.FC = () => { return ( <div> <h1>Custom Component</h1> </div> ); };
mdxファイルでカスタムコンポーネントを使う
import { CustomComponent } from '../components/CustomComponent'; # カスタムコンポーネントのテスト <CustomComponent />
// 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> ); };