Smart Axiata JS Bridge

Small WebView bridge library that provides a core JS bridge with Vue 3 and React adapters. Use it to call native handlers from web content and receive native events.

Install

npm install @smart-axiata/js-bridge

Web integration

Vue quick start

import { createApp } from 'vue';
import App from './App.vue';
import { createBridgePlugin, useBridge } from '@smart-axiata/js-bridge';

const app = createApp(App);
app.use(createBridgePlugin());
app.mount('#app');

const bridge = useBridge();
await bridge.call('getUserInfo');

Vue component example

<script setup lang="ts">
import { useBridge } from '@smart-axiata/js-bridge';

const bridge = useBridge();

const loadUser = async () => {
  const user = await bridge.call('getUserInfo');
  console.log(user);
};

bridge.on('tokenExpired', () => {
  console.log('token expired');
});
</script>

React usage

import React from 'react';
import { ReactBridgeProvider, useReactBridge } from '@smart-axiata/js-bridge';

const UserPanel = () => {
  const bridge = useReactBridge();

  const loadUser = async () => {
    const user = await bridge.call('getUserInfo');
    console.log(user);
  };

  return <button onClick={loadUser}>Load user</button>;
};

const App = () => (
  <ReactBridgeProvider>
    <UserPanel />
  </ReactBridgeProvider>
);

Core API

• bridge.call(name, payload?) -> Promise
• bridge.on(event, handler) -> unsubscribe

Native bridge requirement

The native app must inject a WebViewJavascriptBridge object with:

• callHandler(name, data, callback)
• registerHandler(name, handler)

The web app calls bridge.call('methodName', payload) which maps to callHandler. Native handlers should respond with JSON-compatible values. If an error occurs, respond with { error: 'message' }.