socket.io-react-hook
socket.io-react-hook copied to clipboard
useSocketEvent could send other types of events
I like this hook a lot, but I need to separate sendable and receivable events, so I don't like having to do this:
const { sendMessage } = useSocketEvent('sendable-event');
// lastMessage would always be undefined
// and I can't TS type my events as easily.
I would rather be able to send an event without registering a listener for that same event.
What about something like this:
const { sendMessage, sendAnyMessage } = useSocketEvent();
// sendMessage won't do anything in this case since no event is 'registered'.
<button onClick={() => sendAnyEvent('button-clicked', payload)}>
click me
</button>
Issue 38
Together with my previous suggestion, this is what using the hook could look like:
//Socket stuff
const { sendAnyMessage } = useSocketEvent();
useSocketEvent('chat-message-received', (message) => setMessages(messages => [...messages, message]);
useSocketEvent('star-received', (message) => setStarCount(count = count++);
// Form stuff
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
<button type="submit" onClick={() => sendAnyEvent('chat-message-sent', { text })}>
send message
</button>
This works:
const { socket, connected, error } = useSocket();
socket.emit('eventName', data);
See readme.md https://github.com/nitedani/socket.io-react-hook