@connectycube/react

@connectycube/react

React hooks for state management in ConnectyCube-powered API, chat, and audio/video calls

This library provides a headless solution for managing chat and calls functionality in ConnectyCube.

The core purpose is to handle essential chat features like state management, handling subsequent events and APIs properly etc, so the end user takes care about UI building only.

Installation

npm install @connectycube/react

or

yarn add @connectycube/react

Usage

import { useEffect, useMemo, useRef } from 'react';
import { initConnectyCube, useConnectyCube, CallType } from '@connectycube/react';

initConnectyCube({ appId: 'xxx', authKey: 'xxx-xxx-xxx-xxx' }, { debug: { mode: 1 } });

const StreamElement = ({ stream, ...props }) => {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (videoRef.current && stream) {
      videoRef.current.srcObject = stream;
      videoRef.current.onloadedmetadata = () => {
        videoRef.current?.play();
      };
    }
  }, [stream]);

  return stream ? <video autoPlay playsInline ref={videoRef} {...props} /> : null;
};

const ConnectyCubeDemo: React.FC<ConnectyCubeDemoProps> = ({
  user = { login: 'myUser', password: 'myPassword' },
  opponentId = 123456,
}) => {
  const {
    // session
    createUserSession,
    session,
    // users
    users,
    fetchUsers,
    // chat
    connect,
    isConnected,
    fetchDialogs,
    fetchMessages,
    createChat,
    selectedDialog,
    selectDialog,
    messages,
    sendMessage,
    // calls
    startCall,
    activeCall,
    remoteStreams,
    localStream,
    incomingCall,
    acceptCall,
    rejectCall,
  } = useConnectyCube();
  const currentMessages = useMemo(
    () => (selectedDialog ? messages[selectedDialog._id] ?? [] : []),
    [selectedDialog, messages]
  );

  const handleConnect = async () => {
    if (session && !isConnected) {
      await connect({ userId: session.user_id, password: user.password });
      await fetchDialogs();
    }
  };

  const handleCreateChat = async () => {
    const dialog = await createChat(userId);
    await selectDialog(dialog);
  };

  const handleSendMessage = () => {
    sendMessage('Hi there!');
  };

  const handleStartCall = () => {
    startCall(opponentId, CallType.VIDEO);
  };

  useEffect(() => {
    createUserSession({ login: user.login, password: user.password });
  }, []);

  useEffect(() => {
    if (selectedDialog && currentMessages.length === 0) {
      fetchMessages(selectedDialog._id);
    }
  }, [selectedDialog, currentMessages, fetchMessages]);

  useEffect(() => {
    if (incomingCall) {
      const userName = users[incomingCall.initiatorID].full_name;
      const accepted = confirm(`Incoming call from ${userName}`);

      if (accepted) {
        acceptCall();
      } else {
        rejectCall();
      }
    }
  }, [users, incomingCall]);

  return (
    <div className="container">
      {/* Display messages */}
      <div className="messages-list">
        {currentMessages.map(({ id, message }) => (
          <span id={id} className="message">
            {message}
          </span>
        ))}
      </div>
      {/* Display calls */}
      {activeCall && (
        <div className="calls-container">
          {Object.entries(remoteStreams).map((userId, stream) => (
            <StreamElement id={`remote-stream-${userId}`} stream={stream} />
          ))}
          <StreamElement id="local-stream" stream={stream} muted />
        </div>
      )}
      {/* Actions */}
      <button type="button" onClick={handleConnect}>
        Connect
      </button>
      <button type="button" onClick={handleCreateChat}>
        Create chat
      </button>
      <button type="button" onClick={handleSendMessage}>
        Send message
      </button>
      <button type="button" onClick={handleStartCall}>
        Start call
      </button>
    </div>
  );
};

Documentation

https://developers.connectycube.com/react

Have an issue?

Join our Discord community to get real-time help from our team

Community

• Blog
• X (twitter)@ConnectyCube
• Facebook
• Medium
• YouTube

Want to support our team:

License

Apache 2.0