da-dialler

da-dialler is a lightweight and easy-to-integrate softphone package for React and Next.js applications. It provides a seamless way to add VoIP dialing capabilities with SIP configurations, click-to-dial functionality, and customizable notifications.

Features

• 📞 Softphone Integration – Easily connect to a SIP server to handle VoIP calls.
• 🎯 Click-to-Dial Support – Enable users to initiate calls with a single click.
• 🔔 Custom Notifications – Get notified of connection status and call events.
• 🔧 Configurable SIP Settings – Customize the SIP agent name, domain, and auto-connect options.
• 🚀 Optimized for Next.js and React – Works with SSR and client-side environments.
• 🌐 DaProvider for Global Context – Ensures proper SIP connection handling across the app.

Installation

Install the package via npm:

npm install da-dialler@latest

Usage in React

1. Import and Setup the Dialler Component

Create a file for your dialler component (e.g., Dialler.tsx) and configure it as follows:

"use client";
import DaDialler, {
  DaProvider,
  InitPhoneConfig,
  NotificationPlacement,
  useClickDial,
  usePhone,
} from "da-dialler";
import { useEffect } from "react";

const notify = (
  type: string,
  placement: NotificationPlacement,
  message: string,
  description: string
) => {
  // Handle Notification toasts
  console.log(type, placement, message, description);
};

const initSipConfig: InitPhoneConfig = {
  notificationCallback: notify,
  customAgentName: "Name",
  sipPassword: "Password",
  sipExtension: "0000",
  sipDomainURL: "demo.example.com",
  domainPort: "7443",
  autoConnect: false,
};

function Dialler(config: InitPhoneConfig) {
  const phone = usePhone();

  useEffect(() => {
    if (phone.phone && !phone.phone.isConnected) phone.handleConnect();
    if (phone.phone) console.log("Phone State", { ...phone });
  }, [phone]);
  return <DaDialler.Dialler {...config} />;
}

export default Dialler;

Usage in Next.js

2. Wrap the App with DaProvider

To ensure global context management, wrap your application with DaProvider inside _app.tsx (for Next.js with pages router) or in your root layout (for Next.js with the app router).

For Next.js (Pages Router) - _app.tsx

import { DaProvider } from "da-dialler";

function MyApp({ Component, pageProps }) {
  return (
    <DaProvider>
      <Component {...pageProps} />
    </DaProvider>
  );
}

export default MyApp;

For Next.js (App Router) - layout.tsx

import { DaProvider } from "da-dialler";

export default function RootLayout({ children }) {
  return (
    <DaProvider>
      {children}
    </DaProvider>
  );
}

3. Integrate in a Page (e.g., pages/index.tsx or app/page.tsx)

import Dialler from "../components/Dialler";
import { DaProvider, useClickDial } from "da-dialler";

function DialButton({ number }: { number: string }) {
  const clickToDial = useClickDial();
  return (
    <div className="absolute top-[10px] right-[10px] flex">
      <p className="font-sm text-secondary">{number}</p>
      <button
        className="grid place-items-center 
                 border border-gray-300 rounded-sm p-2 
                 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 
                 text-gray-600 hover:text-gray-800 
                 transition-colors"
        onClick={() => clickToDial(number)}
      >
        📞
      </button>
    </div>
  );
}

export default function Home() {
  return (
    <DaProvider>
      <div className="relative grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
        <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
          <Dialler {...initSipConfig} />
        </main>
        <DialButton number="254790176105" />
      </div>
    </DaProvider>
  );
}

Configuration Options

| Option | Type | Description | |----------------------|---------|-----------------------------------------------| | notificationCallback | Function | Handles custom notifications when SIP events occur. | | customAgentName | string | Sets a custom SIP agent name. | | sipPassword | string | Password for SIP authentication. | | sipExtension | string | Extension number for the SIP account. | | sipDomainURL | string | SIP server domain URL. | | domainPort | string | SIP server port. | | autoConnect | boolean | Automatically connect to SIP when the component mounts. |

License

This package is open-source and available under the MIT License.

Support

For any issues, feature requests, or contributions, please open an issue on the repository.

🚀 Start integrating da-dialler today and power up your React & Next.js applications with VoIP!