Embed a metapage in your React app

Live example

This live example shows how to embed a metapage in a React app.

First imports:

import { MetapageGridLayoutFromDefinitio, MetaframeWrapperEditoverlay } from "@metapages/metapage-grid-react";
import { MetaframeIframe } from "@metapages/metapage-react/components";

You can copy the metapage JSON (blue button) and paste in https://app.metapages.org/ to see the live app.

Result

Loading...

Live Editor

function ExampleEmbedMetapage() {
  const [definition, setDefinition] = useState();

  useEffect(() => {
		(async () => {
				var resp = await fetch("https://metapage.io/dion/example-hello-world-b4dc42b55df94364a1ebac10e8e91f32/metapage.json");
				var metapageJson = await resp.json();
				setDefinition(metapageJson);
		})();
	}, []);

  const onOutputs = (outputs) => {
    // This is where the metapage state changes, via metaframes setting
    // outputs and passing them to downstream metaframes.
    // You can intercept the data state changes for your own purposes
    // console.log(`Got outputs!! outputs=${JSON.stringify(outputs)}`);
  };

  // hack to copy metapage JSON to clipboard
  const copyToClipboard = useCallback(() => {
    var textarea = document.createElement("textarea");
    textarea.value = JSON.stringify(definition);
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
  }, [definition]);

  const CustomGridItemComponentLabel = useMemo(() => {
    return React.forwardRef((props, ref) => {
      return (
        <div
          style={{
            overflow: "hidden",
            padding: "10px",
            backgroundColor: "white",
            border: "1px solid lightgrey",
						width: "100%",
						height: "200px",
            maxHeight: "200px",
            ...props.style,
          }}
          className={props.className}
          ref={ref}
        >
        <MetaframeIframe
          key={props.metaframeId}
          metaframe={props.metaframe}
          {...props.metaframeStyleProps}
          style={{
            height: `100%`,
            overflow: "clip",
            // border: `1px solid #e4e4e4`,
            borderRadius: "0 0.375rem 0.375rem 0.375rem",
            ...props.metaframeStyleProps?.style,
          }}
        />
          
        </div>
      );
    });
  }, []);

  const onDefinition = useCallback(
    (def) => {
      setDefinition(def);
    },
    [setDefinition]
  );

  return (
    <div style={{ width: "100%", height: "250px" }}>
      <button
        onClick={copyToClipboard}
        style={{
          backgroundColor: "#32AEE4",
          borderWidth: "0px",
          color: "#ffffff",
          fontWeight: 800,
          position: "relative",
          outline: "none",
          borderRadius: "6px",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer",
          height: "30px",
          width: "120px",
        }}
      >
        Copy metapage
      </button>
      <div style={{ width: "100%", height: "100px" }}>
        <MetapageGridLayoutFromDefinition
          definition={definition}
          onOutputs={onOutputs}
          onDefinition={onDefinition}
          Wrapper={CustomGridItemComponentLabel}
          style={{ height: "100px" }}
        />
      </div>
    </div>
  );
}