https://github.com/burdiuz/react-signalr-hooks
React hooks for @microsoft/signalr library inspired by @apollo/client
https://github.com/burdiuz/react-signalr-hooks
hooks-api-react react realtime-messaging signalr
Last synced: 3 months ago
JSON representation
React hooks for @microsoft/signalr library inspired by @apollo/client
- Host: GitHub
- URL: https://github.com/burdiuz/react-signalr-hooks
- Owner: burdiuz
- Created: 2021-12-19T08:50:30.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-11T19:06:56.000Z (over 3 years ago)
- Last Synced: 2025-02-05T04:11:26.781Z (4 months ago)
- Topics: hooks-api-react, react, realtime-messaging, signalr
- Language: JavaScript
- Homepage:
- Size: 116 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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.
```javascript
```
- useSignalRSend - Call `HubConnection.send()` every time hook arguments change.
```javascript
const MyComponent = () => {
const [data, setData] = useState(null);
const { loading, error } = useSignalRSend("mySignalRProcedure", [
"argument 1",
123,
]);
useSignalRSubscribe("mySignalREvent", setData);
if (loading) {
return Loading...;
}
if (error) {
return Unexpected error;
}
return
{renderData(data)};
};
```
- useSignalRInvoke - Call `HubConnection.invoke()` every time hook arguments change.
```javascript
const MyComponent = () => {
const { loading, data, error } = useSignalRSend("mySignalRProcedure", [
"argument 1",
123,
]);
if (loading) {
return Loading...;
}
if (error) {
return Unexpected error;
}
return
{renderData(data)};
};
```
- useLazySignalRSend - Returns send function with current hook state. Use function to call `HubConnection.send()`.
```javascript
const MyComponent = () => {
const [data, setData] = useState(null);
const [mySignalRProcedure, { loading, error }] =
useLazySignalRSend("mySignalRProcedure");
useSignalRSubscribe("mySignalREvent", setData);
useEffect(() => {
mySignalRProcedure("argument 1", 123);
}, []);
if (loading) {
return Loading...;
}
if (error) {
return Unexpected error;
}
return
{renderData(data)};
};
```
- useLazySignalRInvoke - Returns invoke function with current hook state. Use function to call `HubConnection.invoke()`.
```javascript
const MyComponent = () => {
const [mySignalRProcedure, { loading, data, error }] =
useLazySignalRInvoke("mySignalRProcedure");
useEffect(() => {
mySignalRProcedure("argument 1", 123);
}, []);
if (loading) {
return Loading...;
}
if (error) {
return Unexpected error;
}
return
{renderData(data)};
};
```
- useSignalRSubscribe - Subscribes callback function to a HubConnection event. Returns unsubscribe function.
```javascript
const MyComponent = () => {
const [data, setData] = useState(null);
const unsubscribeFn = useSignalRSubscribe("mySignalREvent", setData);
// unsubscribe when MyComponent is unmounted
useEffect(() => unsubscribeFn(), []);
return
{renderData(data)};
};
```
- useSignalRConnection - Returns HubConnection instance.
```javascript
const MyComponent = ({ procedure, argument }) => {
const connection = useSignalRConnection();
// unsubscribe when MyComponent is unmounted
useEffect(() => {
connection.send(procedure, argument);
}, [procedure, argument]);
return
{renderData(data)};
};
```
- useIsSignalRConnected - Returns boolean, true if HubConnection successfuly connected.
```javascript
const MyComponent = () => {
const connected = useIsSignalRConnected();
if (!connected) {
return Sorry, not connected...;
}
return ;
};
```
#### Additionaly
- SignalRConsumer - Consumer accepts a render function as child and provides an tuple with connection and connected boolean value.
```javascript
{([connection, connected]) => {
if (!connection || !connected) {
return null;
}
return ;
}}
```
- useCloseBeforeUnload - Use to call `HubConnection.stop()` when `beforeunload` event fired.
```javascript
// use hook somewhere in provider tree
const MyComponent = () => {
useCloseBeforeUnload();
return ;
};
;
```
- useSignalRConnectionState - Returns `HubConnection.state`. This property is being murated and hook `useSignalRConnectionState()` does not trigger rerender of the component.
```javascript
const MyComponent = () => {
// ATTENTION: Will not cause rerender when state changes!
const state = useSignalRConnectionState();
if (state !== HubConnectionState.Connected) {
return Sorry, not connected...;
}
return ;
};
```