https://github.com/finneasles/react-io-client
A socket.io-client hook for react built with Typescript.
https://github.com/finneasles/react-io-client
react-hooks socket-io socket-io-client
Last synced: about 1 year ago
JSON representation
A socket.io-client hook for react built with Typescript.
- Host: GitHub
- URL: https://github.com/finneasles/react-io-client
- Owner: Finneasles
- License: mit
- Created: 2023-01-01T22:37:06.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-14T00:52:51.000Z (about 3 years ago)
- Last Synced: 2025-03-27T14:18:15.471Z (about 1 year ago)
- Topics: react-hooks, socket-io, socket-io-client
- Language: TypeScript
- Homepage: https://f1n.dev/react-io-client/
- Size: 146 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-io-client
[](https://i.imgur.com/Ob4qAwu.png)
> Note: The socket connection does not come with any event handlers. Those should be added and managed by the component that use this hook. [More information](https://f1n.dev/react-io-client/).
## Getting Started
Install dependency:
```bash
npm i react-io-client
```
### Example
Here's an example of how to use the useSocket hook in a React component:
```js
import { useSocket } from "react-io-client";
import React, { useEffect, useState } from "react";
export default function Chat() {
const [socket] = useSocket("ws://localhost:3000", { autoConnect: false });
const [messages, setMessages] = useState([]);
useEffect(() => {
if (!socket) return;
socket.on("message", (message: string) => {
setMessages((prevMessages) => [...prevMessages, message]);
});
socket.emit("join", "room1");
return () => {
socket.off("message");
socket.emit("leave", "room1");
};
}, [socket]);
return messages.map((message, index) => {
return
{message};
});
}
```
## Learn More
* The hook must be wrapped in a useEffect to avoid memory leaks.
You can learn more in the [Documentation](https://f1n.dev/react-io-client).