React-signalr NPM

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

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(
    "event name", // Your Event Key
    (message) => {
      setMessage([...messages, message]);
    },
  );

  return <Components />;
};