use-socket-io

Access the client-side Socket instance of your app with the ease of a single React hook.

Installation

With npm:

npm i --save use-socket-io

With yarn:

yarn add use-socket-io

Usage

import SocketProvider, { useSocket } from "use-socket-io";

const App = () => {
  const socket = useSocket();

  return <div>App</div>;
};

render(
  <SocketProvider uri="http://localhost:8080" autoConnect>
    <App />
  </SocketProvider>,
  document.getElementById("root")
);

API reference

SocketProvider

The wrapper component for the useSocket hook.

Props:

• uri string [REQUIRED] – Socket's URI.
• autoConnect boolean – Whether the component should automatically connect to the Socket upon mounting. Default: false
• onConnect function – An optional callback function to run upon connection.
• onDisconnect function – An optional callback function to run upon disconnection.

Example:

<SocketProvider uri="http://localhost:8080" autoConnect>
  <App />
</SocketProvider>

useSocket

A React hook to access the Socket instance anywhere throughout your app.

See https://socket.io/docs/v3/client-api/index.html#Socket for a detailed description of the Socket instance.

Must be called from a child of <SocketProvider />.