socket-react

socket-react is a lightweight, optimized, and clean React wrapper around socket.io-client. It provides an easy way to manage Socket.io connections in your React applications using context and hooks.

Features

• 🚀 Easy Setup: Hook into your React app in minutes.
• 🛠 Optimized: Managed connection lifecycle with automatic cleanup.
• 🎣 Clean API: Access socket instance and connection status via custom hooks.
• 📝 Type Safe: Written in TypeScript with full type support.

Installation

npm install socket-react socket.io-client

or

yarn add socket-react socket.io-client

Quick Start

Wrap your application with SocketProvider and use the useSocket hook in your components.

1. Set up the Provider

// App.tsx
import { SocketProvider } from "socket-react";

function App() {
  return (
    <SocketProvider uri="http://localhost:4000">
      <MyComponent />
    </SocketProvider>
  );
}

2. Use the Hook

// MyComponent.tsx
import { useSocket } from "socket-react";

function MyComponent() {
  const { socket, isConnected } = useSocket();

  useEffect(() => {
    if (socket) {
      socket.on("message", (data) => {
        console.log("Received:", data);
      });
    }
  }, [socket]);

  return (
    <div>
      <p>Status: {isConnected ? "Connected" : "Disconnected"}</p>
      <button onClick={() => socket?.emit("ping")}>Send Ping</button>
    </div>
  );
}

API Reference

SocketProvider

The SocketProvider component initializes the socket connection and provides it to the rest of your app.

| Prop | Type | Description | | :--------- | :--------------------------------------------------- | :------------------------------------------------------------------------------------------- | | uri | string (optional) | The server URL to connect to. If not provided, it defaults to the host that serves the page. | | options | Partial<ManagerOptions & SocketOptions> (optional) | Configuration options for socket.io-client. See below for details. | | children | React.ReactNode | Your application components. |

Common Options

The options prop accepts any valid options from socket.io-client. Here are some of the most commonly used ones:

| Option | Type | Default | Description | | :--------------------- | :------------------------- | :------------------------- | :------------------------------------------------------- | | autoConnect | boolean | true | Whether to connect automatically on creation. | | reconnection | boolean | true | Whether to allow reconnection if the connection is lost. | | reconnectionAttempts | number | Infinity | Number of reconnection attempts before giving up. | | reconnectionDelay | number | 1000 | Initial delay before trying to reconnect (ms). | | transports | string[] | ["polling", "websocket"] | Preferred transport methods (e.g., ["websocket"]). | | auth | object | (cb) => void | {} | Authentication data (e.g., { token: "..." }). | | query | object | {} | Additional query parameters for the connection. | | timeout | number | 20000 | Connection timeout in milliseconds. |

Example with Options

const options = {
  reconnectionAttempts: 5,
  transports: ["websocket"],
};

<SocketProvider uri="http://localhost:4000" options={options}>
  {/* children */}
</SocketProvider>;

useSocket()

The useSocket hook provides access to the socket instance and its state.

Returns:

| Property | Type | Description | | :-------------- | :-------------------- | :-------------------------------------------- | | socket | Socket \| undefined | The socket.io-client instance. | | isConnected | boolean | True if the socket is currently connected. | | socketId | string \| undefined | The unique ID of the socket connection. | | isInitialized | boolean | True if the socket instance has been created. |

License

MIT