@heymantle/app-bridge-react

React hooks and utilities for Mantle App Bridge integration.

Installation

npm install @heymantle/app-bridge-react

Usage

1. Load the App Bridge script

<script src="https://app.heymantle.com/app-bridge.js" async></script>

2. Use the hooks

import { useAppBridge, useUser, useOrganization } from '@heymantle/app-bridge-react';

function MyComponent() {
  const { mantle, isReady, isConnecting, error } = useAppBridge();
  const { user, isLoading: userLoading } = useUser();
  const { organization, isLoading: orgLoading } = useOrganization();

  if (isConnecting || userLoading || orgLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!isReady || !mantle) return <div>App Bridge not ready</div>;

  const handleFetch = async () => {
    const response = await mantle.authenticatedFetch('/api/some-endpoint');
    const data = await response.json();
    console.log(data);
  };

  return (
    <div>
      <h1>Welcome, {user?.name}!</h1>
      <p>Organization: {organization?.name}</p>
      <button onClick={() => mantle.showToast('Hello!', 'success')}>
        Show Toast
      </button>
      <button onClick={handleFetch}>Fetch Data</button>
    </div>
  );
}

API Reference

Hooks

• useAppBridge() - Returns the App Bridge instance and connection state
• useUser() - Returns user information from the App Bridge
• useOrganization() - Returns organization information from the App Bridge

Note: authenticatedFetch is available directly on the mantle instance returned from useAppBridge() when isReady is true.

Utilities

• getMantleAppBridge() - Get the App Bridge instance
• isRunningInIframe() - Check if running in iframe
• waitForMantleAppBridge() - Wait for App Bridge to be available
• isAppBridgeAvailable() - Check if App Bridge is available
• getAppBridgeConnectionStatus() - Get connection status

Types

import type { 
  MantleAppBridge, 
  MantleOrganization, 
  MantleUser,
  MantleSession
} from '@heymantle/app-bridge-react';

License

MIT