Use socket.io v3 with React, in hooks (React v16.8+).
If you want to use socket.io in v2, you might want to use the v2.0.4 of this package. The last commit related to the v2 version is this one.
Usage
Installation
$ yarn add use-socketio
In your code
useSocket hook
Listen to a specific event and trigger the according callback every time there's one. This hooks doesn't trigger a re-render. You have to manage it yourself.
import SocketIOProvider useSocket from "use-socketio"; const Twitter = const tweets setTweet = ; const socket subscribe unsubscribe = ; return tweetslength ? <ul> tweets </ul> : <p>Actually waiting for the websocket server...</p> ;; const App = <SocketIOProvider ="http://localhost:3000" => <Twitter /> </SocketIOProvider>;
The socketio options to pass to the provider are available here: https://socket.io/docs/client-api/#new-Manager-url-options.
useLastMessage hook
Listen to the latest message received on a specific event name. This hook triggers a re-render so you don't have to.
import SocketIOProvider useLastMessage from "use-socketio"; const Twitter = const data: lastMessage socket subscribe unsubscribe = ; return <p>lastMessage || "Waiting for some tweets"</p>;; const App = <SocketIOProvider ="http://localhost:3000"> <Twitter /> </SocketIOProvider>;
Notes
For example on how to implement a Socket.io server, you can take a look at the socket.io the example folder.