# openblocks-sdk-workmeet

> ## Usage

Latest version **0.0.61** (published 2023-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install openblocks-sdk-workmeet
pnpm add openblocks-sdk-workmeet
yarn add openblocks-sdk-workmeet
bun add openblocks-sdk-workmeet
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.61 |
| Published | 2023-05-25 |
| First published | 2023-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aaron1604 |
| Keywords | openblocks |

## Links

- npm: https://www.npmjs.com/package/openblocks-sdk-workmeet
- npm.io page: https://npm.io/package/openblocks-sdk-workmeet

## Recent versions

- 0.0.61 (latest) — 2023-05-25
- 0.0.60 — 2023-05-25
- 0.0.59 — 2023-05-25
- 0.0.58 — 2023-05-25
- 0.0.57 — 2023-05-25
- 0.0.56 — 2023-05-25
- 0.0.55 — 2023-05-24
- 0.0.54 — 2023-05-24
- 0.0.53 — 2023-05-23
- 0.0.52 — 2023-05-16
- 0.0.51 — 2023-05-12
- 0.0.50 — 2023-05-12
- 0.0.48 — 2023-05-08
- 0.0.47 — 2023-05-04
- 0.0.46 — 2023-05-04
- … 13 more at https://npm.io/package/openblocks-sdk-workmeet/versions

## README

# openblocks-sdk-workmeet

## Usage

yarn:

```bash
yarn add openblocks-sdk-workmeet
```

npm:

```bash
npm install openblocks-sdk-workmeet
```

## Integrate Openblocks' app/module into existing app page

1. Publish your app/module in Openblocks.
2. Set the app/module's access privilege as public.
3. Add code in your existing app as below.

### Import style

```ts
import "openblocks-sdk-workmeet/dist/style.css";
```

### For react app:

```ts
import { OpenblocksAppView } from "openblocks-sdk-workmeet";

<OpenblocksAppView appId="{YOUR_APPLICATION_ID}" />;
```

#### OpenblocksViewProps

| Name                   | Type                        | Description                                                                             | Default value              |
| ---------------------- | --------------------------- | --------------------------------------------------------------------------------------- | -------------------------- |
| appId                  | string                      | The app's id in Openblocks. Required!                                                   | --                         |
| baseUrl                | string                      | Openblocks' api base url                                                                | https://api.openblocks.dev |
| onModuleEventTriggered | (eventName: string) => void | Triggered when module's custom event is triggered. Works only when the app is a module. | --                         |
| onModuleOutputChange   | (output: any) => void       | Triggered when module's outputs change. Works only when the app is a module.            | --                         |

#### Invoke module methods

```tsx
import { useRef } from "ref";
import { OpenblocksAppView } from "openblocks-sdk-workmeet";

function MyExistingAppPage() {
  const appRef = useRef();
  return (
    <div>
      <OpenblocksAppView appId={YOUR_APPLICATION_ID} ref={appRef} />;
      <button onClick={() => appRef.current?.invokeMethod("some-method-name")}>
        Invoke method
      </button>
    </div>
  );
}
```

### For vanilla js:

```js
import { bootstrapAppAt } from "openblocks-sdk-workmeet";

const node = document.querySelector("#my-app");

async function bootstrap() {
  const instance = await bootstrapAppAt(YOUR_APPLICATION_ID, node);

  // set module inputs
  instance.setModuleInputs({ input1: "xxx", input2: "xxx" });

  // invoke module methods
  instance.setModuleInputs({ input1: "xxx", input2: "xxx" });

  // listen module event trigger
  instance.on("moduleEventTriggered", (eventName) => {
    console.info("event triggered:", eventName);
  });

  // listen module output change
  instance.on("moduleOutputChange", (data) => {
    console.info("output data:", data);
  });
}
```

---
_Source: https://npm.io/package/openblocks-sdk-workmeet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._