@biwave/react

React integration SDK for Biwave, providing React components, error boundary, and custom hooks built on top of @biwave/browser.

Features

• Error Boundary (ErrorBoundary): Catches unhandled React component tree errors and displays customizable fallback UI.
• Provider Context (BiwaveProvider): Makes BiwaveClient available across the React component tree via React Context.
• Custom Hooks:
  • useBiwaveClient: Access the initialized BiwaveClient instance anywhere in components.
  • useBiwaveUser: Set or update user identity context (e.g., user ID, email, username).

Installation

# pnpm
pnpm add @biwave/react @biwave/browser @biwave/core react

# npm
npm install @biwave/react @biwave/browser @biwave/core react

# yarn
yarn add @biwave/react @biwave/browser @biwave/core react

Basic Usage

import React from 'react';
import { init, BiwaveProvider, ErrorBoundary, useBiwaveUser } from '@biwave/react';

// Initialize Biwave Browser SDK
const client = init({
  clientId: 'your-client-id',
  environment: 'production',
});

function UserProfile({ user }) {
  // Set current user context
  useBiwaveUser({ id: user.id, email: user.email });

  return <div>Welcome, {user.name}</div>;
}

export default function App() {
  return (
    <BiwaveProvider client={client}>
      <ErrorBoundary fallback={<div>Something went wrong.</div>}>
        <UserProfile user={{ id: '42', email: '[email protected]', name: 'Alex' }} />
      </ErrorBoundary>
    </BiwaveProvider>
  );
}

License

MIT © Bitech.id