# @dapplets/dapplet-overlay-bridge

> The bridge between dapplet and overlay

Latest version **0.1.3** (published 2022-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dapplets/dapplet-overlay-bridge
pnpm add @dapplets/dapplet-overlay-bridge
yarn add @dapplets/dapplet-overlay-bridge
bun add @dapplets/dapplet-overlay-bridge
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2022-04-12 |
| First published | 2021-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 13 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Dapplets Team |
| Maintainers | alsakhaev, dapplets-org |
| Keywords | dapplets, overlay |

## Links

- npm: https://www.npmjs.com/package/@dapplets/dapplet-overlay-bridge
- Repository: https://github.com/dapplets/dapplet-overlay-bridge
- Homepage: https://github.com/dapplets/dapplet-overlay-bridge#readme
- Issues: https://github.com/dapplets/dapplet-overlay-bridge/issues
- npm.io page: https://npm.io/package/@dapplets/dapplet-overlay-bridge

## Dependencies (4)

- [rxjs](https://npm.io/package/rxjs.md) ^6.6.7
- [react](https://npm.io/package/react.md) ^17.0.2
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.39
- [rxjs-proxify](https://npm.io/package/rxjs-proxify.md) ^0.1.1

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.1.3 (latest) — 2022-04-12
- 0.1.2 — 2022-04-03
- 0.1.1 — 2022-02-07
- 0.1.0 — 2021-02-02

## 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
<script type="module">
    import Bridge from 'https://unpkg.com/@dapplets/dapplet-overlay-bridge';
</script>
```

## 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!
```

---
_Source: https://npm.io/package/@dapplets/dapplet-overlay-bridge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._