ohkey-connect

A React component that displays a styled "Connect with Ohkey" button and floating modal.

Installation

npm install ohkey-connect

Usage

import React from 'react';
import { OhkeyConnect } from 'ohkey-connect';

function App() {
  const handleConnect = (credentials) => {
    console.log('Connected with:', credentials);
  };

  const handleDisconnect = () => {
    console.log('Disconnected');
  };

  return (
    <div>
      <h1>My App</h1>
      <OhkeyConnect
        merchantId="your-merchant-id-here"
        onConnect={handleConnect}
        onDisconnect={handleDisconnect}
      />
    </div>
  );
}

export default App;

Or using the default export:

import React from 'react';
import OhkeyConnect from 'ohkey-connect';

function App() {
  const handleConnect = (credentials) => {
    console.log('Connected with:', credentials);
  };

  const handleDisconnect = () => {
    console.log('Disconnected');
  };

  return (
    <div>
      <h1>My App</h1>
      <OhkeyConnect
        merchantId="your-merchant-id-here"
        onConnect={handleConnect}
        onDisconnect={handleDisconnect}
      />
    </div>
  );
}

export default App;

What it does

• Displays a purple gradient button with the Ohkey logo and "Connect with Ohkey" text
• When clicked, shows a floating modal with the Ohkey connection widget iframe
• Loads the actual Ohkey widget for the specified merchant ID
• Modal can be closed by clicking the close button or clicking outside the modal
• After successful connection, shows "✓ Connected" status with model information
• Connected status includes a small "×" button to disconnect
• Styled to match the official Ohkey design system

Props

• merchantId (string, required): Your Ohkey merchant ID
• onConnect (function, optional): Callback function called when connection is successful. Receives credentials object with apiKey, modelName, and providerName.
• onDisconnect (function, optional): Callback function called when user disconnects.

Requirements

• React 16.8.0 or higher
• React DOM 16.8.0 or higher

License

MIT