Usage:
- Wrap your components with the provider
import { IoProvider } from 'socket.io-react-hook';
<IoProvider>
<App />
</IoProvider>
import { useSocket, useSocketEvent } from 'socket.io-react-hook';
const { socket, error } = useSocket();
const { socket, lastMessage, sendMessage } = useSocketEvent(socket, 'message');
useSocket forwards all parameters to socket.io constructor.
See the available options here
If the socket connection depends on state, use it like this:
The connection will be initiated once the socket is enabled.
The connection for a namespace is shared between your components, feel free to use the hooks in multiple components.
import { useCookie } from 'react-use';
import { useSocket } from 'socket.io-react-hook';
export const useAuthenticatedSocket = (namespace?: string) => {
const [accessToken] = useCookie('jwt');
return useSocket(namespace, {
enabled: !!accessToken,
});
};
The useSocket hook always returns a socket-like object, even before a succesful connection. You don't have to check whether it is undefined.
Example:
export const useAuthenticatedSocket = (namespace?: string) => {
const [accessToken] = useCookie('jwt');
return useSocket(namespace, {
enabled: !!accessToken,
});
};
const Index = () => {
const { socket, connected, error } = useAuthenticatedSocket();
const { socket, lastMessage, sendMessage } =
useSocketEvent<string>(socket, 'eventName');
return <div>{ lastMessage }</div>
}
useSocketEvent will immediately return the last available value of lastMessage even on newly mounted components.
Emitting messages works as always:
const { socket, connected, error } = useSocket();
socket.emit('eventName', data);
Or by calling sendMessage
const { socket, lastMessage, sendMessage } = useSocketEvent<string>(socket, 'eventName');
sendMessage(data);