react-signalr

React-Signalr

React-Signalr Is a tools for using signalR, Socket.io or WebSocket in react/react-native apps

• Supported microsoft/signalR version 5 and later
• Supported Socket.io
• Supported WebSocket

Features

• Hooks for connect event to a component
• Manage connections in multiple tabs (SignalR can only have about 6 tabs open). React-signalr will create a connection open and send event to other tabs by hermes-channel
• Handle reconnect

TOC

• install
• getStart
• useSignalREffect

install

$ yarn add react-signalr

getStart

import {
  createSignalRContext, // SignalR
  createWebSocketContext, // WebSocket
  createSocketIoContext, // Socket.io
} from "react-signalr";

create a signalr context,

import { createSignalRContext } from "react-signalr";

const { useSignalREffect, Provider } = createSignalRContext();
// or createSocketIoContext() for socket.io

const App = () => {
  const { token } = YourAccessToken;

  return (
    <SignalRContext.Provider
      connectEnabled={!!token}
      accessTokenFactory={() => token}
      dependencies={[token]} //remove previous connection and create a new connection if changed
      url={"https://example/hub"}
    >
      <Routes />
    </SignalRContext.Provider>
  );
};

useSignalREffect

Use this to connect to an event

const { useSignalREffect, Provider } = createSignalRContext();

const Comp = () => {
  const [messages, setMessage] = useState([]);

  useSignalREffect(
    "event name",
    (message) => {
      setMessage([...messages, message]);
    },
    [messages],
  );

  return null;
};

React-Native

Full supported

Changelog

0.2.17 (2023-06-25)

Features

• add automatic reconnect feature (#26) (4f8d330)