1.1.0 • Published 4 years ago
react-socket-io-hooks v1.1.0
React Socket.io Hooks
SocketProvider
SocketProvider connects to a websocket server and begins listening to emitted events. All emitted events will hit a reducer and update state.
Props
uri: string
- The location of the websocket serverreducer: (state, action) => {}
- A reducer function to handle incoming eventsaction: { type: string, payload: any }
initialState
- The initial state of the application (defaults to{}
)
const reducer = (state, action) => {
console.log(action)
return state;
};
export default function App() {
return (
<SocketProvider
uri="http://localhost:7891"
reducer={reducer}
initialState={{}}>
<h1>Hello World</h1>
</SocketProvider>
);
}
useSocket
This hook returns the connected socket
export const Counter = () => {
const socket = useSocket();
}
useSocketState
This hook returns the current state;
export const Counter = () => {
const state = useSocketState();
}
useSocketSelector
This hook takes a selector to return selected information from state (like redux).
export const Counter = () => {
const count = useSocketSelector(state => state.count);
}
useEmit
This hook returns the emit function to emit a socket event.
export const Counter = () => {
const emit = useEmit();
}
useEmitEvent
This hook returns the a function to emit and event to the websocket server
export const Counter = () => {
const emitEvent = useEmitEvent('MY_EVENT');
}
useSocketDispatch
This hook returns a dispatch function which lets you dispatch an action to your reducer.
Example
import React from 'react';
import {
SocketProvider,
useSocketState,
useEmitEvent
} from 'react-socket-io-hooks';
const reducer = (state, action) => {
switch(action.type) {
case 'UPDATED_COUNT':
return { count: action.payload };
default:
return state;
}
}
const Counter = () => {
const increment = useEmitEvent('INCREMENT');
const decrement = useEmitEvent('DECREMENT');
return (
<>
<button onClick={() => decrement()}>Decrement</button>
<button onClick={() => increment()}>Increment</button>
</>
)
}
const Display = () => {
const state = useSocketState();
console.log(state)
return (
<p>{state.count}</p>
);
}
export default function App() {
return (
<SocketProvider
uri="http://localhost:7891"
reducer={reducer}
initialState={{ count: 0 }}>
<Counter />
<Display />
</SocketProvider>
);
}
const http = require('http').createServer();
const io = require('socket.io')(http);
let count = 0;
io.on('connection', socket => {
socket.emit('UPDATED_COUNT', count);
socket.on('INCREMENT', () => {
count++;
socket.emit('UPDATED_COUNT', count);
socket.broadcast.emit('UPDATED_COUNT', count);
})
socket.on('DECREMENT', () => {
count--;
socket.emit('UPDATED_COUNT', count);
socket.broadcast.emit('UPDATED_COUNT', count);
})
});
http.listen(7891)