react-signalr

React-signalr is a tools for using signalr web socket in react/react-native apps

Usage no npm install needed!

<script type="module">
  import reactSignalr from 'https://cdn.skypack.dev/react-signalr';
</script>

README

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

NPM

install size dependencies

react-signalr

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

$ 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 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;
};

React-Native

Full supported