Ex04: Overlays
In this example we will add an overlay to a POST
. This overlay will be opened with a button click.
Here are two examples of an overlay:
First we implement an overlay written on HTML with pure JavaScript. Second - the React based component.
Here is the initial code for this example, including both of the above overlays: ex04-overlays-exercise.
Now let's create overlays.
#
HTML with JavaScript overlay- In
pure-html-page/index.html
import Bridge class fromhttps://unpkg.com/@dapplets/dapplet-overlay-bridge
package.
- Create Bridge class instance and subscribe it to the
data
event.
- Add an event handler to the button click.
#
React.js based overlayFirst install Dapplet-Overlay Bridge: in /overlayWithReact
module.
- In
/overlayWithReact/src/App.tsx
import Bridge class from @dapplets/dapplet-overlay-bridge package.
- Create
IDappletApi
interface and Bridge class instance typing with the inteface.
- Add a listener to the 'data' event.
- Add an event handler to the button click.
#
Change the dapplet- Implement the IDappletApi interface, the same as in the React-based overlay.
- Implement the overlay opening on the button click. To get the current overlay use
Core.overlay({ name: string, title: string })
.
- Create an object that implements the interface. Write increaseCounterAndToggleLabel function. Declare the API in the overlay.
- Send 'Hello, World!' message and ctx.counter to the overlay using 'data' event.
There is also an onClose
function. It allows handling the closing of the overlay.
- Add to the
dapplet.json
manifest the following option:
Dependencies must be installed before running:
To run the dapplet with pure JS overlay, change start
script in package.json
:
To run the dapplet with ReactJS overlay, change start
script to the following:
Run the dapplet
tip
To publish a dapplet with an overlay, you need assets-manifest.json
. When overlay is written in React, webpack or another module bundler builds it on its own. But when you write it in pure JS, you need to create the manifest yourself. As you can see, if you create a React based overlay from the example, the manifest will have the following structure:
Here is the result code of the example: ex04-overlays-solution.