Socket
Socket
Sign inDemoInstall

@metapages/metaframe-hook

Package Overview
Dependencies
3
Maintainers
1
Versions
55
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@metapages/metaframe-hook

Use hooks to interact with [metaframe](https://metapages.org/) inputs and outputs


Version published
Weekly downloads
355
decreased by-4.57%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

@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

FAQs

Package last updated on 18 Feb 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc