In Morph markdown files, you can use React components.

​
Create and use custom components in markdown files

1

Create a tsx file and export the component

Create a tsx file in the src directory. It is recommended to create it in the src/components directory, but it can be anywhere.

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

Use the custom component in an mdx file

In the mdx file, you can import and use the tsx file with a relative path.

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

# Test Custom Component

<CustomComponent />

​
Use API endpoints from custom components

To execute Python functions from within a custom component, do the following.

To understand this sample code, refer to Alias, loadData(), and 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>
  );
};