@metapages/metaframe-hook

@metapages/metaframe-hook

Use hooks to interact with metaframe inputs and outputs

Installation

npm i @metapages/metaframe-hook

Usage: metaframe inputs + outputs in a react app

Example listening to inputs and setting outputs:

First in your main root render:

render(
    <WithMetaframe>
      <App />
    </WithMetaframe>,
  document.getElementById("root")!
);

Then anywhere else:

import {
  MetaframeObject,
  useMetaframe,
} from "@metapages/metaframe-hook";


export const App: FunctionalComponent = () => {

  // a nice hook handles all the metaframe machinery
  const metaframeObj: MetaframeObject = useMetaframe();

  // Respond to new inputs two ways:
  //   1) this listening mode is bound to reacts render hooks. It is convenient, but less efficient
  useEffect(() => {
    console.log(`I got new inputs from some other metaframe! ${inputs}`);
  }, [metaframeObj.inputs]);

  // Respond to new inputs two ways:
  //   2) bind the listener and cleanup
  useEffect(() => {
    if (!metaframeObj.metaframe) {
      return;
    }
    const disposer = metaframeObj.metaframe.onInput("someInputName", (inputValue) => {
      console.log(`I got new inputs from on channel someInputName! ${inputValue}`);
    });

    return () => {
      disposer();
    }

  }, [metaframeObj.metaframe]);

  // somewhere set outputs
  if (metaframeObj.setOutputs) {
      metaframeObj.setOutputs({"some": "outputs"})
  }

  // let the metapage know we are going to modify our own hash params from user interaction
  useEffect(() => {
    if (metaframeObj.metaframe) {
      metaframeObj.metaframe.notifyOnHashUrlChange();
    }
  }, [metaframeObj.metaframe]);

  // Just render the inputs
  return <div> {metaframeObj.inputs} </div>
}

Examples:

In the repo: https://github.com/metapages/metaframe-javascript

1. Setup metaframe provider: https://github.com/metapages/metaframe-javascript/blob/main/src/index.tsx
2. Access metaframe inputs/outputs: https://github.com/metapages/metaframe-javascript/blob/main/src/hooks/useExecuteCodeWithMetaframe.ts
3. See live example