Median.co Home

NPM Package

Median JavaScript Bridge NPM Package

This library makes it easier to use Median JavaScript Bridge methods from within a SPA web application. The library is framework-agnostic and is designed to work with all major JavaScript frameworks including React, Angular, Vue.js, etc. Follow the steps below to install the package and start using within your web app.

https://www.npmjs.com/package/median-js-bridge

📘

When using the Median JavaScript Bridge NPM package within your web app you must enable this option in the App Studio to prevent the use of your native app's embedded JavaScript Bridge Library and to provide support for listeners. Note that enabling this option in the App Studio without including the NPM package in your web app will cause regular JavaScript Bridge functions and callbacks to not be available.

Installation

Install using a package manager

Install the package using npm or yarn

npm install median-js-bridge --save

OR

yarn add median-js-bridge

Install using a script tag

If you prefer to embed the JavaScript Bridge Library via a <script> tag:

<script type="text/javascript" src="https://unpkg.com/median-js-bridge@latest/dist/median.min.js"></script>

Basic usage

👍

Median not median when using NPM package

When using the NPM Package make note to use capitalized Median to call functions rather than lowercase median which is reserved for the the injected JavaScript library. Your IDE should be configured to help with code hinting to help with completion and avoid semantic errors.

import Median from "median-js-bridge";
import React, { useEffect } from "react";

const App: React.FC = () => {
    useEffect(() => {
        Median.onReady(() => {
            window.alert("Median app ready!");
        });
    }, []);
}

JavaScript Bridge methods specific to NPM Package

↔️Median JavaScript Bridge

To check if running in your app:

Median.isNativeApp(); 
// Returns true or false

To retrieve the current platform:

Median.getPlatform();
// Returns a promise with a string web | android | ios

Usage with listeners

Add listener

Register listener, function will be called when the corresponding event is triggered.

App Resumed Event

const listenerId = Median.appResumed.addListener(() => {
    console.log("App resumed callback");
});

OneSignal plugin

Documentation

const listenerId = Median.oneSignalPushOpened.addListener((data) => {
    console.log(JSON.stringify(data));
});

Share into app plugin

Documentation

const listenerId = Median.shareToApp.addListener((data) => {
    console.log(data.url, data.subject);
});

Haptics plugin

Documentation

const listenerId = Median.deviceShake.addListener(() => {
    console.log("device shake callback");
});

Remove listener

Remove a specific listener so that it will no longer be called when the corresponding event is triggered

Median.deviceShake.removeListener(listenerId);

Updated 12 days ago