@mrii/react-socket.io v0.0.3

@mrii/react-socket.io

library to wrap socket.io-client usage for react apps.

Deprecated!

use rocket-io instead github

Install

yarn add @mrii/react-socket.io

# or using npm

npm i @mrii/react-socket.io

Usage

first: call the createSocketHooks to get an instance of the hooks with the socket

socket.io-hooks.ts

import { createSocketHooks } from '@mrii/react-socket.io';

// exports the hooks
export const {
  useInitSocket,
  useSocket,
  useOn,
  useOnce,
  useEmit,
  useImmediateEmit,
  useEmitEffect,
  // optionally pass args, you can pass them later using `useInitSocket`
} = createSocketHooks('socket-uri', { reconnection: true });

second: call the useInitSocket to initialize the socket in your app.

app.tsx

const App: React.FC = () => {
  // ...

  // optionally pass args, if you already pass them from `createSocketHooks`
  useInitSocket('socket-uri', useMemo({ timeout: 4000 }, []));

  // ...
};

then you can use the hooks in your app

component.tsx

const Component: React.FC = () => {
  // ...

  // optionally pass args, if you already pass them from `createSocketHooks`
  useOn('data', useCallback(data => {
    console.log('[data] event fired with: ', data);
  },[]);

  const emit = useEmit();
  <button onClick={() => emit('data', { message: 'new data emitted!' })}>
    sendData
  </button>;
};

API

createSocketHooks

function that creates a socket instance and return the hooks.

return: void

useInitSocket

hook to init your socket in the app.

return: void

useSocket

hook that returns the instance of the socket.

take no args

return: Socket<DefaultEventsMap, DefaultEventsMap> | undefined

useOn

hook to listen on every event emission.

return: void

useOnce

hook to listen once on event emission.

return: void

useEmit

hook that return the socket.emit function.

take no args.

return: socket.emit function.

useImmediateEmit

hook to emit an event once.

return: void

useEmitEffect

hook to emit an event once the dependency array changes.

return: void

NOTES

• createSocketHooks also returns the actual socket, but be carful when use it because it could be undefined on mount, but it's exported for some use cases.

• try to use the hooks (useEmit, useOn, ...) instead of getting the socket from useSocket and use it, because there some extra cases handled in those hooks.

• memoize the following arguments (not memoizing them may cause some unexpected behavior):

  • the options object passed to useInitSocket.
  • the listener passed to useOn and useOnce.