Bluvo Widget for React

A React wrapper for the Bluvo widget, providing seamless integration with React and Next.js applications.

Features

• Simple React component for the Bluvo widget
• TypeScript support with full type definitions
• Hooks for widget token management
• Clean React patterns for props, callbacks, and lifecycle management

Installation

npm install @bluvo/widget-react

Or with yarn:

yarn add @bluvo/widget-react

Or with pnpm:

pnpm add @bluvo/widget-react

Basic Usage

import { BluvoWidget } from '@bluvo/widget-react';
import 'react';

function App() {
  return (
    <div className="app">
      <h1>Bluvo Widget Demo</h1>
      
      <BluvoWidget
        auth={{
          projectId: 'your-project-id',
          orgId: 'your-org-id'
        }}
        mode="connect"
        width={400}
        theme={{
          dark: true,
          accentColor: '#3B82F6'
        }}
        onMount={() => console.log('Widget mounted')}
        onDestroy={() => console.log('Widget destroyed')}
      />
    </div>
  );
}

export default App;

Next.js Usage

For Next.js apps, you'll want to use dynamic imports to avoid SSR issues with browser-only code:

'use client';

import dynamic from 'next/dynamic';
import { useState } from 'react';

// Dynamically import the widget to avoid SSR issues
const BluvoWidget = dynamic(
  () => import('@bluvo/widget-react').then(mod => mod.BluvoWidget),
  { ssr: false }
);

export default function DashboardPage() {
  return (
    <div className="dashboard">
      <h1>Dashboard</h1>
      
      <div className="widget-container">
        <BluvoWidget
          auth={{
            projectId: 'your-project-id',
            orgId: 'your-org-id'
          }}
          mode="connect"
          theme={{
            dark: true,
            accentColor: '#3B82F6'
          }}
        />
      </div>
    </div>
  );
}

Using the Hook API

You can use the useBluvoWidget hook to manage tokens outside the widget:

import { BluvoWidget, useBluvoWidget } from '@bluvo/widget-react';

function Dashboard() {
  const { hasTokens, clearTokens } = useBluvoWidget();
  
  // Check if the user is connected to Binance
  const isBinanceConnected = hasTokens('binance');
  
  // Function to disconnect from an exchange
  const disconnectExchange = (exchangeId) => {
    clearTokens(exchangeId);
    alert(`Disconnected from ${exchangeId}`);
  };
  
  return (
    <div>
      <h1>Dashboard</h1>
      
      {isBinanceConnected && (
        <button onClick={() => disconnectExchange('binance')}>
          Disconnect Binance
        </button>
      )}
      
      <BluvoWidget
        auth={{
          projectId: 'your-project-id',
          orgId: 'your-org-id'
        }}
        mode="connect"
      />
    </div>
  );
}

Configuration Options

The BluvoWidget component accepts all the same configuration options as the underlying VanJS widget, plus some React-specific props:

interface BluvoWidgetProps {
  // React-specific props
  className?: string;
  style?: React.CSSProperties;
  onMount?: () => void;
  onDestroy?: () => void;
  
  // Auth configuration
  auth?: {
    projectId: string;
    orgId: string;
  };
  
  // Widget mode
  mode?: 'connect' | 'transact';
  
  // Available exchanges
  exchanges?: string[];
  
  // Widget dimensions
  width?: string | number;
  
  // Theme options
  theme?: {
    dark?: boolean;
    accentColor?: string;
    secondaryColor?: string;
  };
  
  // And many more options...
}

For full configuration options, refer to the TypeScript definitions or the original widget documentation.

Development

# Install dependencies
pnpm install

# Start development in watch mode
pnpm dev

# Build for production
pnpm build

# Run tests
pnpm test

# Lint code
pnpm lint

# Type check
pnpm check-types

License

MIT