open-index/open-npm huggingface dataset:
npm package: @metapages/metapage-embed-react
Description: Embed entire applications and workflows into your react apps:
Latest version: 0.0.33
Deprecated: Moved to @metapages/metapage-react and @metapages/metapage-grid-react

# Embed `metaframes` into your own react apps

Embed entire applications and workflows into your react apps:

Docs and example: https://docs.metapage.io/docs/embed-metaframe
npm package: @metapages/metapage-grid-react
Description: Embed metapages as grids directly in your react apps.
Latest version: 0.3.3


# @metapages/metapage-grid-react

Embed metapages as grids directly in your react apps.

## Installation

Install the package:
```sh
npm i @metapages/metapage-grid-react
```

## React Components

You can directly embed a metapage definition in your react app, and
- pass in inputs
- listen to outputs
- listen to definition changes
- customize the component metaframe wrappers


```typescript

import { MetapageGridLayoutFromDefinition } from '@metapages/metapage-grid-react';
import { getMetapageDefinitionFromUrl } from '@metapages/metapage';

export const MyMetapageDisplay: React.FC = () => {

  const [metapageDefinition, setMetapageDefinition] = useState<MetapageDefinitionV1 | undefined>(undefined);

  useEffect(() => {
    (async () => {
      const definition = await getMetapageDefinitionFromUrl("https://app.metapage.io/dion/example-hello-world-b4dc42b55df94364a1ebac10e8e91f32")
      setMetapageDefinition(definition);
    )());;
  }, []);

  if (!metapageDefinition) {
    return <div>Loading...</div>;
  }

  return (
    <MetapageGridLayoutFromDefinition
      definition={metapageDefinition}
      // definition?: MetapageDefinitionV1;
      // inputs?: MetapageInstanceInputs;
      // onOutputs?: (outputs: MetapageInstanceInputs) => void;
      // onDefinition?: (e: MetapageDefinitionV1) => void;
      // onMetapage?: (m: Metapage) => void;
      // Wrapper?: ComponentType<any>;
      // onMetapageError?: (e: any) => void;
      // ErrorWrapper?: ComponentType<any>;
      // debug?: boolean;
      // disableEditing?: boolean;
    />
  )
}
```
npm package: @metapages/metapage-react
Description: Useful React components and hooks for building and using Metapages in your own projects.
Latest version: 0.2.6


# @metapages/metapage-react

Useful React components and hooks for building and using Metapages in your own projects.

## Installation

Install the package:
```sh
npm i @metapages/metapage-react
```


## React Components

## React Hooks



### Your website or application is a metaframe

Use hooks to interact with [metaframe](https://docs.metapage.io/) inputs and outputs

#### Usage: [metaframe](https://docs.metapage.io/) 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-react";


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>
}

```