@elixus/messaging-react

@elixus/messaging-react is a React context provider for managing socket.io connections and real-time messaging in your React applications. This package simplifies the process of integrating live messaging with socket.io in a React environment.

Installation

npm install @elixus/messaging-react

Usage

import React from "react";
import ChatsProvider, { useSocket } from "@elixus/messaging-react";

const App = () => {
  const {
    isConnected,
    connect,
    disconnect,
    onConnect,
    onDisconnect,
    onNewMessage,
    onMessageRead,
    emitSendMessage,
    emitReadChat,
    onlineUsers,
  } = useSocket();

  useEffect(() => {
    onNewMessage((data) => {
      console.log("New message:", data);
    });

    onMessageRead((data) => {
      console.log("Message read:", data);
    });

    onlineUsers((data) => {
      console.log("Online users:", data);
    });
  }, []);

  return (
    <div>
      <h1>Chat Application</h1>
      <button
        onClick={() => emitSendMessage({ to: "user1", message: "Hello" })}
      >
        Send Message
      </button>
    </div>
  );
};

const Root = () => (
  <ChatsProvider
    url="http://localhost:3000"
    requireAuth={true}
    token="YOUR_TOKEN"
  >
    <App />
  </ChatsProvider>
);

export default Root;

API

ChatsProvider

The ChatsProvider component initializes the socket connection and provides context for managing socket events.

Props

• children: React children components.
• url: The socket.io server URL.
• requireAuth: Boolean to indicate if authentication is required.
• token: The authentication token.

useSocket

The useSocket hook provides access to the socket context.

Returns

• isConnected: Boolean indicating if the socket is connected.
• connect: Function to manually connect the socket.
• disconnect: Function to manually disconnect the socket.
• onConnect(callback): Register a callback for the connect event.
• onDisconnect(callback): Register a callback for the disconnect event.
• onNewMessage(callback): Register a callback for the new-message event.
• onMessageRead(callback): Register a callback for the message-read event.
• emitSendMessage(data): Emit a send-message event.
• emitReadChat(data): Emit a read-chat event.
• onlineUsers(callback): Register a callback for the online event.

Example

import React, { useEffect } from "react";
import ChatsProvider, { useSocket } from "@elixus/messaging-react";

const App = () => {
  const {
    isConnected,
    connect,
    disconnect,
    onConnect,
    onDisconnect,
    onNewMessage,
    onMessageRead,
    emitSendMessage,
    emitReadChat,
    onlineUsers,
  } = useSocket();

  useEffect(() => {
    onNewMessage((data) => {
      console.log("New message:", data);
    });

    onMessageRead((data) => {
      console.log("Message read:", data);
    });

    onlineUsers((data) => {
      console.log("Online users:", data);
    });
  }, []);

  return (
    <div>
      <h1>Chat Application</h1>
      <button
        onClick={() => emitSendMessage({ to: "user1", message: "Hello" })}
      >
        Send Message
      </button>
    </div>
  );
};

const Root = () => (
  <ChatsProvider
    url="http://localhost:3000"
    requireAuth={true}
    token="YOUR_TOKEN"
  >
    <App />
  </ChatsProvider>
);

export default Root;