QSApp Vanilla Integration

Usage

Install this component from NPM:

pnpm add @qsapp/vanilla

Import this component into your main script:

import QSApp, { QSAppProps } from "@qsapp/vanilla";

Then use the library within your web page passing your QSApp ID as a property.

const options: QSAppProps = {
  id: "YOUR_QSAPP_ID",
  onStart: () => {
    console.log("QSApp has started");
  },
  actions: {
    exampleAction: (actionName) => console.log(`Action: ${actionName}`),
  },
  mode: "canvas", // or 'iframe'
};

const qsApp = new QSApp(options);

// Append the QSApp container to your document
document.getElementById("qsapp-container")?.appendChild(qsApp.container);

Here is a list of all properties the QSApp library currently supports:

Property	Description	type	Required?
id	Your QSApp ID	string	Yes
className	CSS classes for styling	string	No
actions	Function from QSApp action	Record<string, (action: string) => void>	No
hideLoadingAnimation	Hides loading animation	boolean	No
loadingAnimation	Loading Animation	HTMLElement	No
deferLoading	Wait data loading	boolean	No
onStart	Functions to run on start	() => void	No
mode	Use Canvas or Iframe	'canvas'	'iframe'

Receiving QSApp Actions

The actions property allows you to define an action to listen to and a corresponding function from the parent app to run. Example:

const options: QSAppProps = {
  ...
  actions: {
    exampleAction: (actionName) => console.log(`Action: ${actionName}`),
  }
};

Sending Events to QSApp

We can send events from our web page to the QSApp which can be used to trigger various states.

qsApp.send("some event");

qsApp.setLayoutText("main", "header", "New Text");

QSApp Functions

Here's a list of the functions which you can use to send Events and manipulate your QSApp Layouts.

Function	Description	type
send	Send events to QSApp	(event: string) => void
setLayoutText	Update a Text Node	(layout: string, element: string, text: string) => void