A new way to build React chat apps with ConnectyCube

Nowadays, building real-time chat applications is both an art and a science. Integrating ConnectyCube into your React projects opens a world of possibilities for robust messaging, video calling, and much more.

However, as your applications grow, so does the complexity of managing state effectively. That’s where the custom use-chat React hook comes in – a powerful solution to simplify state management and supercharge your chat app development.

What is use-chat

use-chat is a library that provides a headless solution for managing chat functionality in ConnectyCube. Similar to how Formik simplifies form handling, this library simplifies the development of chat applications.

One of the key benefits of the use-chat hook is its ability to abstract away the nitty-gritty of state management. By encapsulating all the complexities related to handling user messages, online statuses, and real-time updates, the hook provides a clean, intuitive API that lets you focus on building engaging features rather than wrestling with state synchronization issues.

Installation and usage

Installation

Install the hook via npm (or yarn):

npm install @connectycube/use-chat
# or with yarn
yarn add @connectycube/use-chat

Basic usage

Once installed, import the hook into your component and start managing your chat state effortlessly:

import { useChat } from "@connectycube/use-chat";

const MyComponent = () => {
  const { connect, createChat, sendMessage, selectedDialog } = useChat();

  const handleConnect = async () => {
    const chatCredentials = {
      userId: 22,
      password: "password",
    };
    await connect(chatCredentials);
  };

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

  const handleSendMessage = async () => {
    // send message to selected dialog
    sendMessage("Hi there");
  };

  return (
    <div className="container">
      <button type="button" onClick={handleConnect}>
        Connect
      </button>
      <button type="button" onClick={handleCreateChat}>
        Create chat
      </button>
      <button type="button" onClick={handleSendMessage}>
        Send message
      </button>
    </div>
  );
};

export default MyComponent;

Features Supported

The use-chat hook is packed with a variety of features to enhance your chat application’s capabilities:

• Handle chats and messages states, including the currently active conversation
• Manage chat participants states
• Maintain typing indicators and users last activity.
• Support attachments download
• Message drafts
• Moderation via user reporting and block

Next Steps

Join ConnectyCube to create your great app. Dive deeper into the use-chat hook and discover how it can transform your React and ConnectyCube integration. For detailed API documentation, best practices, and step-by-step guides on how to get started, visit our use-chat Documentation Portal.

Join our Discord community, explore advanced features, and start building modern, high-performing chat apps today!