Skip to main content

Embed a metaframe in a React app

Embed a metaframe in your React app​

(Check npm link)

Integrate single or multiple npm packages into your website as an alternative to typical npm/yarn install etc.

Integrate any npm/javascript module

You see a metaframe with functionality you would like for your own site. With a few lines of code, you can integrate any of the large library of

Example:

Live demo​

This example shows an editor as an embedded metaframe with outputs handled by React hooks

Result
Loading...
Live Editor
function ExampleEmbedMetaframe() {
  const url =
    "https://editor.mtfm.io/#?button=hidden&menuhidden=true&options=JTdCJTIyYXV0b3NlbmQlMjIlM0F0cnVlJTJDJTIyaGlkZW1lbnVpZmlmcmFtZSUyMiUzQWZhbHNlJTJDJTIybW9kZSUyMiUzQSUyMnBsYWludGV4dCUyMiUyQyUyMnRoZW1lJTIyJTNBJTIydnMtZGFyayUyMiU3RA==";

  const [text, setText] = useState("Edit me!! ");

  const onOutputs = useCallback(
    (outputs) => {
      if (outputs && outputs.text) {
        setText(outputs.text);
      }
    },
    [setText]
  );

  return (
    <>
      <Admonition type="tip" title="Text output from the embedded metaframe">
        {text}
      </Admonition>

      <MetaframeStandaloneComponent
        url={url}
        inputs={{ text }}
        onOutputs={onOutputs}
      />
    </>
  );
}

Example: JSON editor as a react component​

This is a minimal example in react, embedding the monaco (link) code editor configured for JSON.

import { useCallback } from "react";
import { MetaframeStandaloneComponent } from "@metapages/metapage-embed-react";
import { MetaframeInputMap } from "@metapages/metapage";

export const EditorJson: React.FC<{
  content: string;
  onChange: (s: string) => void;
}> = ({ content, onChange }) => {
  const onOutputs = useCallback(
    (outputs: MetaframeInputMap) => {
      if (outputs["value"] === undefined || outputs["value"] === null) {
        return;
      }
      onChange(outputs["value"]);
    },
    [onChange]
  );

  return (
    <div>
      <MetaframeStandaloneComponent
        url="https://editor.mtfm.io/#?options=eyJhdXRvc2VuZCI6dHJ1ZSwiaGlkZW1lbnVpZmlmcmFtZSI6dHJ1ZSwibW9kZSI6Impzb24iLCJ0aGVtZSI6ImxpZ2h0In0="
        inputs={{ value: content }}
        onOutputs={onOutputs}
      />
    </div>
  );
};

Use cases​

  • quickly integrate complex code into your main app
  • quickly experiment with different modules without requiring installation or rebuilding
    • some javascript modules, e.g. monaco, require custom complex build step (depending on your builder, webpack, vite, etc)

Advantages​

  • the assets are not bundled with the main app, reducing build times and increasing download speed
  • the editor can be easily configured via the URL
  • the editor can easily be replaced without installing any additional modules