@actualwave/use-signalr
v1.0.1
Published
React hooks for @microsoft/signalr library inspired by @apollo/client
Downloads
2
Maintainers
Readme
@actualwave/use-signalr
React hooks for @microsoft/signalr library inspired by @apollo/client.
Installation
npm add @actualwave/use-signalr
or
yarn add @actualwave/use-signalr
API
- SignalRProvider - Provider component, should be the root node for every component using hooks from this package.
<SignalRProvider
onConnected={onConnected}
onConnected={onError}
connectionUrl="https://my.sonarr.domain"
>
<App />
</SignalRProvider>
- useSignalRSend - Call
HubConnection.send()
every time hook arguments change.
const MyComponent = () => {
const [data, setData] = useState(null);
const { loading, error } = useSignalRSend("mySignalRProcedure", [
"argument 1",
123,
]);
useSignalRSubscribe("mySignalREvent", setData);
if (loading) {
return <span>Loading...</span>;
}
if (error) {
return <span className="danger">Unexpected error</span>;
}
return <div>{renderData(data)}</div>;
};
- useSignalRInvoke - Call
HubConnection.invoke()
every time hook arguments change.
const MyComponent = () => {
const { loading, data, error } = useSignalRSend("mySignalRProcedure", [
"argument 1",
123,
]);
if (loading) {
return <span>Loading...</span>;
}
if (error) {
return <span className="danger">Unexpected error</span>;
}
return <div>{renderData(data)}</div>;
};
- useLazySignalRSend - Returns send function with current hook state. Use function to call
HubConnection.send()
.
const MyComponent = () => {
const [data, setData] = useState(null);
const [mySignalRProcedure, { loading, error }] =
useLazySignalRSend("mySignalRProcedure");
useSignalRSubscribe("mySignalREvent", setData);
useEffect(() => {
mySignalRProcedure("argument 1", 123);
}, []);
if (loading) {
return <span>Loading...</span>;
}
if (error) {
return <span className="danger">Unexpected error</span>;
}
return <div>{renderData(data)}</div>;
};
- useLazySignalRInvoke - Returns invoke function with current hook state. Use function to call
HubConnection.invoke()
.
const MyComponent = () => {
const [mySignalRProcedure, { loading, data, error }] =
useLazySignalRInvoke("mySignalRProcedure");
useEffect(() => {
mySignalRProcedure("argument 1", 123);
}, []);
if (loading) {
return <span>Loading...</span>;
}
if (error) {
return <span className="danger">Unexpected error</span>;
}
return <div>{renderData(data)}</div>;
};
- useSignalRSubscribe - Subscribes callback function to a HubConnection event. Returns unsubscribe function.
const MyComponent = () => {
const [data, setData] = useState(null);
const unsubscribeFn = useSignalRSubscribe("mySignalREvent", setData);
// unsubscribe when MyComponent is unmounted
useEffect(() => unsubscribeFn(), []);
return <div>{renderData(data)}</div>;
};
- useSignalRConnection - Returns HubConnection instance.
const MyComponent = ({ procedure, argument }) => {
const connection = useSignalRConnection();
// unsubscribe when MyComponent is unmounted
useEffect(() => {
connection.send(procedure, argument);
}, [procedure, argument]);
return <div>{renderData(data)}</div>;
};
- useIsSignalRConnected - Returns boolean, true if HubConnection successfuly connected.
const MyComponent = () => {
const connected = useIsSignalRConnected();
if (!connected) {
return <span>Sorry, not connected...</span>;
}
return <MyRealtimeUI />;
};
Additionaly
- SignalRConsumer - Consumer accepts a render function as child and provides an tuple with connection and connected boolean value.
<SignalRConsumer>
{([connection, connected]) => {
if (!connection || !connected) {
return null;
}
return <MyRealtimeUI connection={connection} />;
}}
</SignalRConsumer>
- useCloseBeforeUnload - Use to call
HubConnection.stop()
whenbeforeunload
event fired.
// use hook somewhere in provider tree
const MyComponent = () => {
useCloseBeforeUnload();
return <MyRealtimeUI />;
};
<SignalRProvider>
<App>
<MyComponent />
</App>
</SignalRProvider>;
- useSignalRConnectionState - Returns
HubConnection.state
. This property is being murated and hookuseSignalRConnectionState()
does not trigger rerender of the component.
const MyComponent = () => {
// ATTENTION: Will not cause rerender when state changes!
const state = useSignalRConnectionState();
if (state !== HubConnectionState.Connected) {
return <span>Sorry, not connected...</span>;
}
return <MyRealtimeUI />;
};