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 Supported Socket.io

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();
// or createSocketContext for socket.io

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.2 (2021-09-30)

Features

• implements socket.io (#4) (c2dbd70)

Bug Fixes

• few missed socket context (eb6989b)