Loading...

invision-extensions-iframe-sdk

A small utility library for communicating between Profitbase InVision and an iframe extension app.


Installation

Using npm:

npm i @profitbase/invision-extensions-iframe-sdk

Using yarn:

yarn add @profitbase/invision-extensions-iframe-sdk

Example

  1. Import invision from '@profitbase/invision-extensions-iframe-sdk'
  2. Call invision.sendMessage(...);
import React, { useState, useEffect } from 'react';
import invision from '@profitbase/invision-extensions-iframe-sdk';
const App: React.FC = () => {
const [message, setMessage] = useState();
const [receivedMessage, setReceivedMessage] = useState();
// Receives the message sent from the Workbook.
// We recommend that you always check the event origin and message format to ensure that you
// are are not processing malicious data.
const onMessageReceived = (evt: MessageEvent) => {
setReceivedMessage(evt.data);
}
useEffect(() => {
// The (Workbook) iframe component that hosts this app will send messages using the window.postMessage() API,
// so we need to set up a listener to receive messages.
// Note! We do not provide an API for receiving messages through window.postMessage(),
// because that may trip up features of your app if you are using window messaging elsewhere.
window.addEventListener('message', onMessageReceived);
return () => window.removeEventListener('message', onMessageReceived);
});
const sendMessage = () => {
// Use invision.sendMessage(...) to send a message to the iframe Workbook component
// that hosts this app, so that it can be handled by the Workbook business logic.
// Using this API ensures that the message is sent to the correct receiver.
invision.sendMessage(message);
}
return (
<div style={{border: '1px solid gainsboro', padding:10}}>
<p style={{fontWeight:'bold'}}>
This is our iframe extension
</p>
<div>
<p>We received:</p>
<span>{receivedMessage}</span>
</div>
<p>
Type a message and press 'Send Message'
</p>
<input onChange={e => setMessage(e.target.value)} />
<button onClick={sendMessage}>Send Message</button>
</div>
);
}
export default App;