@harmonia/host-client v1.0.4

Harmonia - App Client

Harmonia packages allow communication between apps inside of iframes and their parent window.

@harmonia/host-client should be used by a window that has an iframe in it, and wants to communicate with the iframe content window.

Installing

> npm install @harmonia/host-client

or

> yarn add @harmonia/host-client

Usage

Creating App

First of all, the app instance needs to be created.

import Harmonia from '@harmonia/host-client'
this.app = await Harmonia.App.create(appConfig)

The create() method needs an AppConfig input.

export interface AppConfig {
  containerElementId: string
  url: string
  name: string
  height: 'auto' | string
  width: string
  initPayload: any
  resizeEventDelayMs?: number
}

The Harmonia.App.create(appConfig) finds the HTML element with same ID as appConfig.containerElementId, them it creates an iframe with appConfig.url as src and appends this iframe as a child of the container. The method also returns an instance of the application to be used for communication.

Dimensions

In AppConfig you can set the height and width of the iframe HTML element.

• :arrow_up_down: You can set height as "auto" if you want the iframe to resize automatically and have the same height as its content. Or, you can set a fixed css value, e.g "1000px" or "100vh".

• :left_right_arrow: For width, you can set a fixed css value, e.g "100%", "300px" or "100vw".

Communicating

Receivig Events

Use method on to listen to events sended from host app.

app.on('ready', (event) => {
  console.log(event)
})

Sending Events

To send events, use app.publish(event).

app.publish({
  type: 'my-event-type',
  data: {
    foo: {},
  },
})

:information_source: You can import and use NativeEventType to use Harmonia predefined event types, for example, type: NativeEventType.RESIZE