react-socket.io

react socket.io provider Higher Order Component, passing the socket to children

Usage

Install from npm

Documentation

Basic Usage

import SocketProvider from 'react-socket.io';

const socketOptions = {
  url: <redisUrl>,
  ioOptions: <redisOptions>,
  initialSocketEvents: [],
  onConnectEvents: [],
  onDisconnectEvents: [],
  loadingComponent: <CustomLoadingComponent>
};

ReactDOM.render(
    <Router history={browserHistory}>
      <Route path="/" component={SocketProvider(App, socketOptions))} />
      <Route path="/login" component={unauthComponent} />
    </Router>,
  document.getElementById('root')
);

In App the following props are now exposed:

socket
addSocketEvent
emitSocketEvent
removeSocketEvents

initialSocketEvents

You can give the socket provider default socket events that needs to be run directly after the socket connection is made. The on event callback returns the socket. These socket events must have the following format:

{
  type: 'on',
  name: 'connect',
  callback: socket => store.dispatch(socketConnected(socket))
},
// emit has the options property instead of callback.
{
  type: 'emit',
  name: 'client:init',
  options: {}
}

onConnectEvents

Specify what functions should be run when a socket connection is made.

onConnectEvents: [
  socket => store.dispatch(socketConnected(socket))
]

onDisconnectEvents

Specify what functions should be run when a socket is disconnected.

onDisconnectEvents: [
  store.dispatch(userLogoutClient()),
  store.dispatch(socketRemove())
]

loadingComponent

A Custom loading component that can be used to show the user the socket is reconnecting. This component gets a prop isConnecting injected. This can be used to show a difference between reconnecting and offline.

// The prop is injected by default.
<loadingComponent isConnecting={isConnecting} />;

Installation

src

Install node_modules used in ./src:

$ npm i

Compile ./src with Babel:

$ npm run compile

Development

src

To watch for changes in ./src run:

$ npm run watch

Babel will compile ./src on changes.

License

This project is licensed under the terms of the MIT license.