use-signalr-hub

useSignalRHub

An easy to use React hook for @microsoft/signalr

Please use Microsoft's Documentation and API Reference as guidance.

Getting started

Install using your preferred package manager

$ npm install use-signalr-hub
$ yarn add use-signalr-hub

Import into your project

import signalR, { useSignalRHub } from "use-signalr-hub"

Use in your React component

const signalRHub = useSignalRHub("/chathub", {
  onConnected: (hub) => {
    console.log("Connected to /chathub", hub)
    hub.on("ReceiveMessage", (user, message) => {
      setMessage({user, message})
    })
  },
  onDisconnected: () => {
    console.log("Disconnected from /chathub")
  },
  onError: (error) => {
    console.log("Connection to /chathub failed with error", error)
  }
})

const handleSubmit = (message, user) => {
  signalRHub.invoke("SendMessage", user, message)
    .catch((error) => {
      console.log("Failed to invoke SendMessage on /chathub", error)
    })
}

Configure defaults

signalR.setDefaults({
  httpTransportTypeOrOptions: {
    accessTokenFactory: () => user.userData.token
  },
  automaticReconnect: false
})

Api

const signalRHub = useSignalRHub(hubUrl, {
  onConnected,
  onDisconnected,
  onReconnecting,
  onReconnected,
  onError,
  enabled,
  automaticReconnect,
  httpTransportTypeOrOptions,
  hubProtocol,
  logging
})

Options

onConnected?: (hub: HubConnection) => void
onDisconnected?: (error?: Error) => void
onReconnecting?: (error?: Error) => void
onReconnected?: (connectionId?: string) => void
onError?: (error?: Error) => void
enabled?: boolean
automaticReconnect?: number[] | IRetryPolicy | boolean
httpTransportTypeOrOptions?: IHttpConnectionOptions | HttpTransportType
hubProtocol?: IHubProtocol
logging?: LogLevel | string | ILogger

HubConnection | IRetryPolicy | IHttpConnectionOptions | HttpTransportType | IHubProtocol | LogLevel | ILogger

Returns

signalRHub: HubConnection | null

HubConnection