@methodfi/opal-react

React SDK for integrating Method Opal into your web applications.

Installation

npm install @methodfi/opal-react
# or
yarn add @methodfi/opal-react

Quick Start

1. Provider Setup

Wrap your app with the OpalProvider:

import { OpalProvider } from '@methodfi/opal-react';

export default function App() {
  return (
    <OpalProvider>
      <YourAppContent />
    </OpalProvider>
  );
}

2. Hook Usage

Use the useOpal hook in your components:

import { useOpal, OpalEventType } from '@methodfi/opal-react';

function Screen() {
  const { open, close, isOpen, error } = useOpal({
    env: 'dev',
    onOpen: () => {},
    onExit: () => {},
    onEvent: event => {
      switch (event.type) {
        case OpalEventType.SESSION_STARTED:
          // ...
          break;
        case OpalEventType.SESSION_COMPLETED:
          // ...
          break;
        case OpalEventType.SESSION_ERRORED:
          // ...
          break;
        case OpalEventType.SESSION_EXITED:
          // ...
          break;
      }
    },
  });

  const onLaunchOpal = async () => {
    const token = await getOpalToken(); // POST /opal/token
    open({ token });
  };

  return <button onClick={onLaunchOpal}>Launch Opal</button>;
}