A higher order component to manage socket communication in React.
Check out the live chat example and its source code.
react-with-socket allows to separate handling of sockets and your UI.
Its higher order component allows you to declare your handling of
incoming events and to define actions, which are pure javascript
functions which will send data over the socket.
Your presentational components can thus remain socket-agnostic and only need to deal with incoming props.
react-with-socket is not bound to a specific socket implementation.
It integrates best with socket.io - check the API
documentation for more.
importiofrom'socket.io-client';importwithSocket,{setSocketConstructor}from'react-with-socket';setSocketConstructor(io)// define socket.io as our socket providerconstApp=withSocket({initialState: {messages: []},mapData: ()=>({// listen to message events and append the incoming message to our list of messagesmessage: (props,message)=>({messages: [...props.messages,message]})}),mapEmit: (emit)=>({// define an action creator to send data through the socketsendMessage: (message)=>emit('message',message)})})(({ messages, sendMessage }))=>{return(<div><ul>{messages.map((message,i)=>(<likey={i}>{message}</li>))}</ul><buttononClick={()=>sendMessage('Some text!')}>Send a message!</button></div>);}Sets the default socket constructor function, which is used on
componentWillMount, when the createSocket option is not specified.
A Socket needs to be of the following shape:
{
on: ((event: String, data: Object) => void) => void
emit: (event: String, data: Object) => void
close: () => void
}
on listens to incoming data, identified by an event name.
emit sends data through the socket, identified by an event name. The
data object needs to be serializable.
close is called when the component unmounts and should close the
socket connection.
This is a subset of a Socket as defined by socket.io.
Brought to you by Team Outlaw @ Small Improvements