1.0.4 • Published 1 year ago

@elyxios/messaging-react v1.0.4

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

@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;
1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago