react-signalr

react-signalr Is a tools for using signalr socket in react/react-native apps

react-signalr

Supported microsoft/signalR version 5 and later

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

create a signalr context,

import { createSignalRContext } from "react-signalr";

const SignalRContext = createSignalRContext<"message"|"status">(
  ["message","status"],
);


const App = () => {
  const { token } = StoreAuthentication.useState();

  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 Comp = () => {
  const [messages, setMessage] = useState([]);

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

  return null;
};

Changelog

0.1.0 (2021-06-02)

Features

• handle dynamic events (0dae25c)