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
• Get started SignalR
• Get started SocketIO
• Get started WebSocket

install

$ yarn add react-signalr @microsoft/signalr socket.io-client

Get started

signalr

First of all you need to create a signalR context. every thing is depend on your context, you could create multiple context.

import { createSignalRContext } from "react-signalr/signalr";

const SignalRContext = createSignalRContext();

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 for connect to an event

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

  SignalRContext.useSignalREffect(
    "event name", // Your Event Key
    (message) => {
      setMessage([...messages, message]);
    },
  );

  return <Components />;
};

socketio

create a socketIO context,

import { createSocketIoContext } from "react-signalr/socketio";

const SocketIOContext = createSocketIoContext();

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

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

useSignalREffect

Use this to connect to an event

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

  SocketIOContext.useSocketEffect(
    "event name", // Your Event Key
    (message) => {
      setMessage([...messages, message]);
    },
  );

  return <Components />;
};

websocket

create a websocket context,

import { createWebSocketContext } from "react-signalr/websocket";

const WebsocketContext = createWebSocketContext();

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

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

useWebSocketEffect

Use this for connect to an event in you component

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

  WebsocketContext.useWebSocketEffect(
    (message) => {
      setMessage([...messages, message]);
    },
  );

  return <Components />;
};

supports

react-signalr	@microsoft/signalr
0.2.0 - 0.2.18	7.x
0.2.19	7.x - 8.x

React-Native

Full supported

Changelog

0.2.24 (2024-09-28)

Bug Fixes

• remove useless random-value package (e5f3803)