# @metapages/metaframe-hook

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

Latest version **1.1.3** (published 2024-02-18) · 0 weekly downloads

## Install

```sh
npm install @metapages/metaframe-hook
pnpm add @metapages/metaframe-hook
yarn add @metapages/metaframe-hook
bun add @metapages/metaframe-hook
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2024-02-18 |
| First published | 2021-05-09 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 24.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | metapages |

## Links

- npm: https://www.npmjs.com/package/@metapages/metaframe-hook
- Repository: https://github.com/metapages/metaframe-hook
- Homepage: https://github.com/metapages/metaframe-hook/tree/main/docs#readme
- Issues: https://github.com/metapages/metaframe-hook/issues
- npm.io page: https://npm.io/package/@metapages/metaframe-hook

## Dependencies (1)

- [fast-json-stable-stringify](https://npm.io/package/fast-json-stable-stringify.md) ^2.1.0

## Recent versions

- 1.1.3 (latest) — 2024-02-18
- 1.0.12 — 2022-10-20
- 1.0.11 — 2022-09-18
- 1.0.9 — 2022-05-29
- 1.0.8 — 2022-01-29
- 1.0.7 — 2022-01-29
- 1.0.6 — 2022-01-29
- 1.0.5 — 2021-12-30
- 1.0.4 — 2021-12-30
- 1.0.3 — 2021-12-30
- 1.0.2 — 2021-12-30
- 1.0.1 — 2021-12-30
- 0.6.17 — 2021-12-30
- 0.6.16 — 2021-10-04
- 0.6.15 — 2021-10-03
- … 40 more at https://npm.io/package/@metapages/metaframe-hook/versions

## README

# @metapages/metaframe-hook

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

## Installation

```sh
npm i @metapages/metaframe-hook
```

## Usage: [metaframe](https://metapages.org/) inputs + outputs in a react app

Example listening to inputs and setting outputs:

First in your main root render:


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

Then anywhere else:


```typescript

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](https://metapages.org/) provider: https://github.com/metapages/metaframe-javascript/blob/main/src/index.tsx
2. Access [metaframe](https://metapages.org/) inputs/outputs: https://github.com/metapages/metaframe-javascript/blob/main/src/hooks/useExecuteCodeWithMetaframe.ts
3. See [live example](https://app.metapages.org/#?definition=IntcbiAgXCJ2ZXJzaW9uXCI6IFwiMC4zXCIsXG4gIFwibWV0YVwiOiB7XG4gICAgXCJsYXlvdXRzXCI6IHtcbiAgICAgIFwiZmxleGJveGdyaWRcIjoge1xuICAgICAgICBcImRvY3NcIjogXCJodHRwOi8vZmxleGJveGdyaWQuY29tL1wiLFxuICAgICAgICBcImxheW91dFwiOiBbXG4gICAgICAgICAgW1xuICAgICAgICAgICAge1xuICAgICAgICAgICAgICBcIm5hbWVcIjogXCJnZW5lcmF0ZVwiLFxuICAgICAgICAgICAgICBcIndpZHRoXCI6IFwiY29sLXhzLTNcIixcbiAgICAgICAgICAgICAgXCJzdHlsZVwiOiB7XG4gICAgICAgICAgICAgICAgXCJtYXhIZWlnaHRcIjogXCI2MDBweFwiLFxuICAgICAgICAgICAgICAgIFwib3ZlcmZsb3dZXCI6IFwiaGlkZGVuXCJcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgXCJuYW1lXCI6IFwiamF2YXNjcmlwdFwiLFxuICAgICAgICAgICAgICBcIndpZHRoXCI6IFwiY29sLXhzLTdcIlxuICAgICAgICAgICAgfVxuICAgICAgICAgIF1cbiAgICAgICAgXVxuICAgICAgfVxuICAgIH1cbiAgfSxcbiAgXCJtZXRhZnJhbWVzXCI6IHtcbiAgICBcImdlbmVyYXRlXCI6IHtcbiAgICAgIFwidXJsXCI6IFwiaHR0cHM6Ly9tZXRhcGFnZXMuZ2l0aHViLmlvL21ldGFmcmFtZS1nZW5lcmF0b3IvIz9vcHRpb25zPWV5Sm1jbVZ4ZFdWdVkza2lPakl3TENKa2FYTjBjbWxpZFhScGIyNGlPaUp6YVc0aUxDSnBibU55WlcxbGJuUWlPakF1TVgwPVwiXG4gICAgfSxcbiAgICBcImphdmFzY3JpcHRcIjoge1xuICAgICAgXCJ1cmxcIjogXCJodHRwczovL21ldGFwYWdlcy5naXRodWIuaW8vbWV0YWZyYW1lLWphdmFzY3JpcHQvIz9vcHRpb25zPWV5SnRiMlJsSWpvaWFtRjJZWE5qY21sd2RDSXNJblJvWlcxbElqb2liR2xuYUhRaUxDSm9hV1JsWldScGRHOXlJanBtWVd4elpYMCZ0ZXh0PVkyOXVjM1FnWkdsemNHOXpaWEp6SUQwZ1cxMDdDZ3BqYjI1emRDQnliMjkwSUQwZ1pHOWpkVzFsYm5RdVoyVjBSV3hsYldWdWRFSjVTV1FvSjNKbGJtUmxjaWNwT3dwM2FHbHNaU0FvY205dmRDNW1hWEp6ZEVOb2FXeGtLU0I3Q2lBZ0lDQnliMjkwTG5KbGJXOTJaVU5vYVd4a0tISnZiM1F1YkdGemRFTm9hV3hrS1RzS0lDQjlDblpoY2lCallXNTJZWE1nUFNCa2IyTjFiV1Z1ZEM1amNtVmhkR1ZGYkdWdFpXNTBLQ2RqWVc1MllYTW5LVHNLWTJGdWRtRnpMbmRwWkhSb0lEMGdNakF3T3dwallXNTJZWE11YUdWcFoyaDBJRDBnTWpBd093cHliMjkwTG1Gd2NHVnVaRU5vYVd4a0tHTmhiblpoY3lrN0NncGpiMjV6ZENCamRIZ2dQU0JqWVc1MllYTXVaMlYwUTI5dWRHVjRkQ2duTW1RbktUc0tZMjl1YzNRZ1czY3NJR2hkSUQwZ1d5QXlNQ3dnWTJGdWRtRnpMbWhsYVdkb2RDQmRPd3BqYjI1emRDQmJlQ3dnZVYwZ1BTQmJZMkZ1ZG1GekxuZHBaSFJvSUM4Z01pd2dZMkZ1ZG1GekxtaGxhV2RvZENBdklESmRPd3BqYjI1emIyeGxMbXh2WnlnbmMzUjFabVluS1FwamIyNXpkQ0JrY21GM0lEMGdLSEpoWkNrZ1BUNGdld29nSUNBZ1kzUjRMbU5zWldGeVVtVmpkQ2d3TENBd0xDQmpZVzUyWVhNdWQybGtkR2dzSUdOaGJuWmhjeTVvWldsbmFIUXBPd29LSUNBZ0lDOHZJR1pwY25OMElITmhkbVVnZEdobElIVnVkSEpoYm5Oc1lYUmxaQzkxYm5KdmRHRjBaV1FnWTI5dWRHVjRkQW9nSUNBZ1kzUjRMbk5oZG1Vb0tUc0tDaUFnSUNCamRIZ3VZbVZuYVc1UVlYUm9LQ2s3Q2lBZ0lDQXZMeUJ0YjNabElIUm9aU0J5YjNSaGRHbHZiaUJ3YjJsdWRDQjBieUIwYUdVZ1kyVnVkR1Z5SUc5bUlIUm9aU0J5WldOMENpQWdJQ0JqZEhndWRISmhibk5zWVhSbEtIZ2dMQ0JvSUM4Z01pazdDaUFnSUNBdkx5QnliM1JoZEdVZ2RHaGxJSEpsWTNRS0lDQWdJR04wZUM1eWIzUmhkR1VvY21Ga0tUc0tDaUFnSUNBdkx5QmtjbUYzSUhSb1pTQnlaV04wSUc5dUlIUm9aU0IwY21GdWMyWnZjbTFsWkNCamIyNTBaWGgwQ2lBZ0lDQmpkSGd1Y21WamRDZ3RkeUF2SURJc0lDMW9JQzhnTWl3Z2R5d2dhQ2s3Q2dvZ0lDQWdZM1I0TG1acGJHeFRkSGxzWlNBOUlDSmliSFZsSWpzS0lDQWdJR04wZUM1bWFXeHNLQ2s3Q2dvZ0lDQWdZM1I0TG5KbGMzUnZjbVVvS1RzS2ZRb0tMeThnVEdsemRHVnVJSFJ2SUdGdUlHbHVjSFYwQ21ScGMzQnZjMlZ5Y3k1d2RYTm9LRzFsZEdGbWNtRnRaUzV2YmtsdWNIVjBLQ0p5WVdScFlXNXpJaXdnWkhKaGR5a3BPd29LTHk4Z1VtVjBkWEp1SUdFZ1kyeGxZVzUxY0NCbWRXNWpkR2x2YmdweVpYUjFjbTRnS0NrZ1BUNGdld29nSUNBZ2QyaHBiR1VvWkdsemNHOXpaWEp6TG14bGJtZDBhQ0ErSURBcElIc0tJQ0FnSUNBZ0lDQmthWE53YjNObGNuTXVjRzl3S0Nrb0tUc0tJQ0FnSUgwS2ZRPT1cIixcbiAgICAgIFwiaW5wdXRzXCI6IFtcbiAgICAgICAge1xuICAgICAgICAgIFwibWV0YWZyYW1lXCI6IFwiZ2VuZXJhdGVcIixcbiAgICAgICAgICBcInNvdXJjZVwiOiBcInZcIixcbiAgICAgICAgICBcInRhcmdldFwiOiBcInJhZGlhbnNcIlxuICAgICAgICB9XG4gICAgICBdXG4gICAgfVxuICB9LFxuICBcInBsdWdpbnNcIjogW1xuICAgIFwiaHR0cHM6Ly9tZXRhcGFnZXMuZ2l0aHViLmlvL21ldGFmcmFtZS1lZGl0b3IvXCJcbiAgXVxufSI=)

---
_Source: https://npm.io/package/@metapages/metaframe-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._