@callpromn/rtc-kit-react

v0.0.2

Published

4 months ago

RTC Kit React UI components - CallPro LLC

Downloads

0High
0Medium
0Low

blgn94

callpro

artistry449

react ui components rtc calling voip callpro

RTC Kit UI React

RTC Kit UI-ийн React компонентууд - TypeScript дэмжлэг болон интеграцлагдсан дуудлагын удирдлагатай "real-time communication" програм бүтээхэд зориулсан React сан юм.

Онцлогууд

⚛️ React-Анхдагч дизайн - Hooks болон context бүхий React компонентууд
🔄 Интеграцлагдсан дуудлагын удирдлага - Дуудлагын төлөвийн зориулсан Built-in context provider
🎨 Загвар дэмжлэг - Тохируулга бүхий Light болон Dark mode
🔧 Бүрэн TypeScript - Complete type safety and IntelliSense
🪝 React Hooks - Дуудлагын төлөв удирдахад зориулсан тусгай hooks
🚀 Гүйцэтгэл оновчтой - Үр ашигтай дахин рендер болон санах ойн ашиглалт

Суулгах - Installation

npm install @callpromn/rtc-kit-react

Peer Dependencies:

react >= 18.0.0
react-dom >= 18.0.0
rtc-sdk >= 1.0.0

Quick start

1. ClientProvider тохируулах

Дуудлагын удирдлагыг идэвхжүүлэхийн тулд өөрийн project-ийг ClientProvider-аар wrap хийх ёстой:

import React from 'react';
import { ClientProvider } from '@callpromn/rtc-kit-react';

const config = {
    socketUrl: 'wss://your-rtc-server.com',
    socketToken: 'your-socket-token',
    phoneNumber: 'your-company-number',
    socketConnectionOptions: undefined,
    outboundRoom: 'out-bound-room-name',
    inboundRoom: 'in-bound-room-name',
};

function App() {
  return (
    <ClientProvider config={config}>
      <YourAppComponents />
    </ClientProvider>
  );
}

export default App;

2. RTC Компонентуудыг ашиглах

import React, { useState } from 'react';
import { 
  CallButton, 
  Numpad, 
  NumberField, 
  NumberDeleteButton,
  useClientContext 
} from '@callpromn/rtc-kit-react';

function Dialer() {
  const { isOutboundCall, isCallActive, toPhoneNumber, setToPhoneNumber } = useClientContext();

  return (
    <div className="dialer">
      {/* Дугаар харуулах */}
      <NumberField 
        phoneNumber={toPhoneNumber}
        theme="dark"
      />
      
      {/* Тоон самбар */}
      <Numpad
        phoneNumber={toPhoneNumber}
        onNumberClick={setToPhoneNumber}
        maxLength={15}
        theme="dark"
      />
      
      {/* Удирдлага */}
      <div className="controls">
        <NumberDeleteButton
          phoneNumber={toPhoneNumber}
          onClick={() => setToPhoneNumber(prev => prev.slice(0, -1))}
          theme="dark"
        />
        
        <CallButton
          toPhoneNumber={toPhoneNumber}
          disabled={!toPhoneNumber || isCallActive}
          theme="dark"
          onClick={() => console.log(`${toPhoneNumber} руу дуудаж байна`)}
        />
      </div>
      
      {/* Дуудлагын төлөв */}
      {isOutboundCall && <p>Дуудаж байна...</p>}
      {isCallActive && <p>Дуудлага идэвхтэй</p>}
    </div>
  );
}

Компонентууд

🔗 ClientProvider

Дуудлагын төлөв удирдлага болон RTC клиент.

import { ClientProvider } from '@callpromn/rtc-kit-react';

const config = {
    socketUrl: 'wss://your-rtc-server.com',
    socketToken: 'your-socket-token',
    phoneNumber: 'your-company-number',
    socketConnectionOptions: undefined,
    outboundRoom: 'out-bound-room-name',
    inboundRoom: 'in-bound-room-name',
};

<ClientProvider config={config}>
  {children}
</ClientProvider>

Props:

config: CallClientConfig - RTC клиентийн тохиргоо

🪝 useClientContext Hook

Аппын бүх хэсэгт дуудлагын төлөв болон аргуудад хандах.

import { useClientContext } from '@callpromn/rtc-kit-react';

function CallStatus() {
  const {
    isIncomingCall,
    isOutboundCall, 
    isCallActive,
    isConnected,
    inboundUserData,
    createCall,
    acceptCall,
    declineCall,
    endCall,
    toggleMic,
    isMicOn
  } = useClientContext();

  return (
    <div>
      <p>Холбогдсон: {isConnected ? 'Тийм' : 'Үгүй'}</p>
      <p>Дуудлага идэвхтэй: {isCallActive ? 'Тийм' : 'Үгүй'}</p>
      {isIncomingCall && (
        <div>
          <p>Ирж буй дуудлага: {inboundUserData?.phoneNumber}</p>
          <button onClick={acceptCall}>Хүлээн авах</button>
          <button onClick={declineCall}>Татгалзах</button>
        </div>
      )}
    </div>
  );
}

Буцаах утгууд:

isIncomingCall: boolean - Ирж буй дуудлагын төлөв
isOutboundCall: boolean - Гарч буй дуудлагын төлөв
isCallActive: boolean - Идэвхтэй дуудлагын төлөв
isConnected: boolean - Холболтын төлөв
inboundUserData: object - Ирж буй дуудагчийн өгөгдөл
createCall(phoneNumber: string) - Дуудлага эхлүүлэх
acceptCall() - Ирж буй дуудлагыг хүлээн авах
declineCall() - Ирж буй дуудлагыг татгалзах
endCall() - Идэвхтэй дуудлагыг дуусгах
toggleMic() - Микрофоныг асаах/унтраах
isMicOn: boolean - Микрофоны төлөв

📞 CallButton

Гадагшаа дуудлага хийх.

import { CallButton } from '@callpromn/rtc-kit-react';

<CallButton
  toPhoneNumber="+1234567890"
  disabled={false}
  theme="dark"
  onClick={(event) => console.log('Тусгай дарах боловсруулагч')}
  style={{ borderRadius: '8px' }}
/>

Props:

toPhoneNumber?: string - Залгах утасны дугаар
disabled?: boolean - Товчлуурыг идэвхгүй болгох
theme?: 'light' | 'dark' - Dark болон Light mode
onClick?: (event) => void - onClick функц
style?: React.CSSProperties - Inline styling загвар

✅ AcceptButton

Ирж буй дуудлагыг хүлээн авах.

import { AcceptButton } from '@callpromn/rtc-kit-react';

<AcceptButton
  disabled={!isIncomingCall}
  theme="dark"
  onClick={() => console.log('Дуудлага хүлээн авлаа')}
/>

❌ DeclineButton

Ирж буй дуудлагыг таслах.

import { DeclineButton } from '@callpromn/rtc-kit-react';

<DeclineButton
  disabled={!isIncomingCall}
  theme="dark"
  onClick={() => console.log('Дуудлагыг татгалзав')}
/>

📞 EndButton

Идэвхтэй дуудлагыг дуусгах.

import { EndButton } from '@callpromn/rtc-kit-react';

<EndButton
  disabled={!isCallActive}
  theme="dark"
  onClick={() => console.log('Дуудлагыг дуусгав')}
/>

🎙️ MicButton

Дуудлагын үеэр микрофоныг асаах/унтраах.

import { MicButton } from '@callpromn/rtc-kit-react';

<MicButton
  disabled={!isCallActive}
  theme="dark"
  onClick={() => console.log('Микрофоныг эргүүлэв')}
/>

🔢 Numpad

Утасны дугаар оруулахад зориулсан интерактив тоон самбар.

import { Numpad } from '@callpromn/rtc-kit-react';
import { useClientContext } from '@callpromn/rtc-kit-react';

const { toPhoneNumber, setToPhoneNumber } = useClientContext();

<Numpad
  phoneNumber={toPhoneNumber}
  onNumberClick={setToPhoneNumber}
  maxLength={15}
  theme="dark"
  style={{ margin: '20px' }}
/>

Props:

phoneNumber: string - Залгах утасны дугаар
onNumberClick: (value: string) => void - onNumberClick функц
maxLength?: number - Оронын хамгийн их тоо (анхдагч: 8)
theme?: 'light' | 'dark' - Харагдах загвар
style?: React.CSSProperties - Inline styling загвар

📱 NumberField

Залгах утасны дугаарыг харуулах.

import { NumberField } from '@callpromn/rtc-kit-react';

<NumberField
  phoneNumber="1234567890"
  theme="dark"
/>

Props:

phoneNumber: string - Залгах утасны дугаар
theme?: 'light' | 'dark' - Dark болон Light mode
style?: React.CSSProperties - Inline styling загвар

⌫ NumberDeleteButton

Дугаар устгах товчлуур.

import { NumberDeleteButton } from '@callpromn/rtc-kit-react';

<NumberDeleteButton
  phoneNumber={phoneNumber}
  onClick={() => setPhoneNumber(prev => prev.slice(0, -1))}
  theme="dark"
/>

Props:

phoneNumber: string - Залгах утасны дугаар
onClick: () => void - onClick функц
theme?: 'light' | 'dark' - Dark болон Light mode
style?: React.CSSProperties - Inline styling загвар

Бүрэн жишээ

Бүрэн функцтэй диалер компонент

import React, { useState } from 'react';
import {
  ClientProvider,
  CallButton,
  AcceptButton,
  DeclineButton,
  EndButton,
  MicButton,
  Numpad,
  NumberField,
  NumberDeleteButton,
  useClientContext
} from '@callpromn/rtc-kit-react';
import { CallClientConfig } from 'rtc-sdk';

const config: CallClientConfig = {
  apiUrl: 'wss://your-rtc-server.com',
  apiKey: 'your-api-key',
  userId: 'user123'
};

function DialerApp() {
  return (
    <ClientProvider config={config}>
      <MainDialer />
    </ClientProvider>
  );
}

function MainDialer() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const {
    isIncomingCall,
    isOutboundCall,
    isCallActive,
    isConnected,
    inboundUserData,
    isMicOn
  } = useClientContext();

  const handleDeleteNumber = () => {
    setPhoneNumber(prev => prev.slice(0, -1));
  };

  const clearNumber = () => {
    setPhoneNumber('');
  };

  return (
    <div className="dialer-app">
      {/* Холболтын төлөв */}
      <div className="status-bar">
        <span>Төлөв: {isConnected ? '🟢 Холбогдсон' : '🔴 Салсан'}</span>
      </div>

      {/* Ирж буй дуудлагын UI */}
      {isIncomingCall && (
        <div className="incoming-call">
          <h2>Ирж буй дуудлага</h2>
          <p>Хэнээс: {inboundUserData?.phoneNumber || 'Үл мэдэгдэх'}</p>
          <div className="call-actions">
            <AcceptButton theme="dark" />
            <DeclineButton theme="dark" />
          </div>
        </div>
      )}

      {/* Идэвхтэй дуудлагын UI */}
      {isCallActive && (
        <div className="active-call">
          <h2>Дуудлага идэвхтэй</h2>
          <div className="call-controls">
            <MicButton theme="dark" />
            <EndButton theme="dark" />
          </div>
          <p>Микрофон: {isMicOn ? '🎤 Асаалттай' : '🎤 Унтраалттай'}</p>
        </div>
      )}

      {/* Диалерын UI (дуудлагагүй үед) */}
      {!isCallActive && !isIncomingCall && (
        <div className="dialer">
          <NumberField 
            phoneNumber={phoneNumber}
            theme="dark"
            className="number-display"
          />
          
          <Numpad
            phoneNumber={phoneNumber}
            onNumberClick={setPhoneNumber}
            maxLength={15}
            theme="dark"
          />
          
          <div className="dialer-actions">
            <NumberDeleteButton
              phoneNumber={phoneNumber}
              onClick={handleDeleteNumber}
              theme="dark"
            />
            
            <CallButton
              toPhoneNumber={phoneNumber}
              disabled={!phoneNumber || !isConnected}
              theme="dark"
            />
            
            <button onClick={clearNumber} className="clear-btn">
              Арилгах
            </button>
          </div>
        </div>
      )}

      {/* Гарч буй дуудлагын төлөв */}
      {isOutboundCall && (
        <div className="outbound-call">
          <p>📞 {phoneNumber} руу дуудаж байна...</p>
        </div>
      )}
    </div>
  );
}

export default DialerApp;

Компонент загварын жишээнүүд

// CallButton with custom styles
<CallButton
  toPhoneNumber={phoneNumber}
  style={{
    backgroundColor: '#007bff',
    width: '80px',
    height: '80px',
    borderRadius: '50%',
    boxShadow: '0 4px 20px rgba(0, 123, 255, 0.4)',
    border: 'none',
    transition: 'all 0.3s ease'
  }}
  theme="dark"
/>

// Numpad with glass effect styling
<Numpad
  phoneNumber={phoneNumber}
  onNumberClick={setPhoneNumber}
  style={{
    background: 'rgba(255, 255, 255, 0.1)',
    backdropFilter: 'blur(20px)',
    border: '1px solid rgba(255, 255, 255, 0.2)',
    borderRadius: '20px',
    padding: '25px',
    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)'
  }}
  theme="dark"
/>

// NumberField with modern input styling
<NumberField
  phoneNumber={phoneNumber}
  style={{
    background: 'rgba(255, 255, 255, 0.05)',
    border: '2px solid #007bff',
    borderRadius: '12px',
    padding: '16px 20px',
    fontSize: '24px',
    fontWeight: '600',
    color: '#007bff',
    textAlign: 'center',
    minHeight: '60px',
    backdropFilter: 'blur(10px)'
  }}
  theme="dark"
/>

// Button group with consistent styling
<div style={{ display: 'flex', gap: '15px', justifyContent: 'center' }}>
  <AcceptButton
    style={{
      background: '#28a745',
      width: '70px',
      height: '70px',
      borderRadius: '50%',
      boxShadow: '0 6px 20px rgba(40, 167, 69, 0.4)',
      transition: 'all 0.3s ease'
    }}
    theme="dark"
  />
  <DeclineButton
    style={{
      background: '#dc3545',
      width: '70px',
      height: '70px',
      borderRadius: '50%',
      boxShadow: '0 6px 20px rgba(220, 53, 69, 0.4)',
      transition: 'all 0.3s ease'
    }}
    theme="dark"
  />
  <EndButton
    style={{
      background: '#6c757d',
      width: '70px',
      height: '70px',
      borderRadius: '50%',
      boxShadow: '0 6px 20px rgba(108, 117, 125, 0.4)',
      transition: 'all 0.3s ease'
    }}
    theme="dark"
  />
</div>

TypeScript дэмжлэг

Бүрэн TypeScript type тодорхойлолт багтсан:

import type {
  CallClient,
  BaseButtonProps,
  CallButtonProps,
  AcceptButtonProps,
  DeclineButtonProps,
  EndButtonProps,
  MicButtonProps,
  NumpadProps,
  NumberFieldProps,
  NumberDeleteButtonProps,
  ClientProviderProps
} from '@callpromn/rtc-kit-react';

Next.js интеграци

// components/ClientWrapper.tsx
'use client';

import { ClientProvider } from '@callpromn/rtc-kit-react';

const config = {
    socketUrl: 'wss://your-rtc-server.com',
    socketToken: 'your-socket-token',
    phoneNumber: 'your-company-number',
    socketConnectionOptions: undefined,
    outboundRoom: 'out-bound-room-name',
    inboundRoom: 'in-bound-room-name',
};

export function ClientWrapper({ children }: { children: React.ReactNode }) {
  return (
    <ClientProvider config={config}>
      {children}
    </ClientProvider>
  );
}

// app/page.tsx
import { ClientWrapper } from '@/components/ClientWrapper';
import { Dialer } from '@/components/Dialer';

export default function Home() {
  return (
    <ClientWrapper>
      <Dialer />
    </ClientWrapper>
  );
}

Шаардлага

React 18+
TypeScript 4.5+ (санал болгох)
Web Components дэмжлэг бүхий modern browser

Холбогдох сангууд - Related Packages

rtc-kit - Vanilla Web Components

Лиценз - License

Энэ төсөл нь CallPro LLC-ийн өмчийн програм хангамж юм. Дэлгэрэнгүй мэдээллийг LICENSE.txt-ээс үзнэ үү.

Дэмжлэг

📧 И-мэйл: [email protected]
📖 Баримт бичиг - documentation: https://docs.callpro.mn

Made with ❤️ by CallPro LLC

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

RTC Kit UI React

Онцлогууд

Суулгах - Installation

Quick start

1. ClientProvider тохируулах

2. RTC Компонентуудыг ашиглах

Компонентууд

🔗 ClientProvider

🪝 useClientContext Hook

📞 CallButton

✅ AcceptButton

❌ DeclineButton

📞 EndButton

🎙️ MicButton

🔢 Numpad

📱 NumberField

⌫ NumberDeleteButton

Бүрэн жишээ

Бүрэн функцтэй диалер компонент

Компонент загварын жишээнүүд

TypeScript дэмжлэг

Next.js интеграци

Шаардлага

Холбогдох сангууд - Related Packages

Лиценз - License

Дэмжлэг