react-signalr-hooks
v0.1.2
Published
A React wrapper for SignalR
Downloads
403
Maintainers
Readme
react-signalr-hooks
A set of React hooks to use SignalR methods and callbacks within components.
Features
- Connect SignalR Hub method to a component
- Connect callback to a component
- Strongly typed hubs for both methods and callbacks
Example
import { useState } from 'react';
import {
createSignalRContext,
SignalRHub,
SignalRHubCallbacks,
SignalRHubMethods
} from 'react-signalr-hooks';
enum ExampleHubMethods {
exampleMethod = 'exampleMethod'
}
interface ExampleHubMethodSignatures extends SignalRHubMethods<ExampleHubMethods> {
exampleMethod: (params: { x: number, y: number }) => string;
}
enum ExampleHubCallbacks {
exampleCallback = 'exampleCallback',
}
interface ExampleHubCallbackSignatures extends SignalRHubCallbacks<ExampleHubCallbacks> {
exampleCallback: (retVal: string | number) => string;
}
interface ExampleHub extends SignalRHub<ExampleHubCallbacks, ExampleHubMethods> {
callbackNames: ExampleHubCallbacks,
callbacks: ExampleHubCallbackSignatures,
methodNames: ExampleHubMethods,
methods: ExampleHubMethodSignatures,
}
let HubContext = createSignalRContext<ExampleHub, ExampleHubCallbacks, ExampleHubMethods>()
function App() {
const [cbVal, setCbVal] = useState<number | string>(123);
const exampleMethod = HubContext.useMethod(ExampleHubMethods.exampleMethod);
HubContext.useCallback(ExampleHubCallbacks.exampleCallback, (retVal) => {
setCbVal(retVal);
}, []);
return <HubContext.Provider
hubUrl="http://localhost:3000">
<div onClick={() => exampleMethod({ x: 123, y: 456 })}>{cbVal}</div>
</HubContext.Provider>
}