socket.io-react-hooks: A TypeScript repository from zasamen

React hooks for socket.io 4.x

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);

zasamen/socket.io-react-hooks

React hooks for socket.io 4.x