https://github.com/dapplets/dapplet-overlay-bridge
The bridge between dapplet and overlay
https://github.com/dapplets/dapplet-overlay-bridge
Last synced: 11 months ago
JSON representation
The bridge between dapplet and overlay
- Host: GitHub
- URL: https://github.com/dapplets/dapplet-overlay-bridge
- Owner: dapplets
- License: mit
- Created: 2021-02-02T08:04:29.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T16:05:50.000Z (almost 3 years ago)
- Last Synced: 2025-02-03T10:16:55.523Z (12 months ago)
- Language: TypeScript
- Size: 178 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dapplet Overlay Bridge
TypeScript library for two-way communication between a dapplet and an overlay.
## Installation
Use the package manager npm or yarn to install the library.
```
npm i @dapplets/dapplet-overlay-bridge
```
You can import the library as [ECMAScript module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).
```html
import Bridge from 'https://unpkg.com/@dapplets/dapplet-overlay-bridge';
```
## Usage
You can try simple example written in one HTML file by this path: [`examples/pure-html-page`](https://github.com/dapplets/dapplet-overlay-bridge/tree/master/examples/pure-html-page).
React.js based example also available in [`examples/react-overlay`](https://github.com/dapplets/dapplet-overlay-bridge/tree/master/examples/react-overlay).
```javascript
// Dapplet side
const overlay = Core.overlay({ url: 'http://localhost:5000', title: 'Overlay' });
overlay.sendAndListen('data', 'Hello, World!', {});
// Overlay side
import Bridge from '@dapplets/dapplet-overlay-bridge';
class MyBridge extends Bridge {
_subId = 0;
onData(callback) {
this.subscribe('data', (data) => {
callback(data);
return (++this._subId).toString();
});
}
}
const bridge = new MyBridge();
bridge.onData((data) => alert(data)); // Hello, World!
```