Installation

npm install @statflo/widget-sdk # or yarn add @statflo/widget-sdk

Please see our Examples.

Initializing the widget store

Native

importuseWidgetStorefrom"@statflo/widget-sdk";

React

importuseWidgetStorefrom"@statflo/widget-sdk";importcreatefrom"zustand";constuseBoundWidgetStore=create(useWidgetStore);

Publishing an event

Native

import{WidgetEvent}from"@statflo/widget-sdk";const{ publishEvent }=useWidgetStore.getState();publishEvent(newWidgetEvent("MESSAGE_UPDATED","<YOUR MESSAGE>"));

React

import{WidgetEvent}from"@statflo/widget-sdk";const{ publishEvent }=useBoundWidgetStore((state)=>state);useEffect(()=>{// This event only fires on component initializationpublishEvent(newWidgetEvent("MESSAGE_UPDATED","<YOUR MESSAGE>"));},[]);

Listening to an event

Native

useWidgetStore.subscribe((state)=>{constlatest=state.getLatestEvent();if(latest){switch(latest.type){case"MESSAGE_UPDATED":
// ...break;}}});

React

const{ events, getLatestEvent }=useBoundWidgetStore((state)=>state);useEffect(()=>{constlatest=getLatestEvent();if(!latest){return;}switch(latest.type){case"MESSAGE_UPDATED":
// ...break;}},[events]);

Events API

The following events are supported:

TBD

Security

To view all MDN's window.postMessage() security concerns click here.

The primary concern in this package is the target origin of the window.postMessage() API as described by MDN:

Always specify an exact target origin, not *, when you use postMessage to send data to other windows. A malicious site can change the location of the window without your knowledge, and therefore it can intercept the data sent using postMessage.

By default, the target origin will be the url of the widget you register with the Statflo API.