A complete chat solution to use in your React + Redux apps.
- A store middleware to manage the websocket connection
- A reducer to keep track of the messages and their status
- Some UI elements you can reuse to build your client
Note: This project is still under heavy development, and is not ready for production use. Feel free to test it, though.
First, you have to add the middleware and reducer to your Redux store:
let store =
If you want to use our ready-made client, just render it at your component of choice:
// ...<Chat autoconnect= chatUrl: 'wss://example.com' credentials: username: 'demo' />
To use the default styling, don't forget to also import our CSS from your app:
If the ready-made client doesn't suit your needs, you can replace some or all of the component tree. All the wrapper components allow overriding which child classes they use, so if you want to customize eg. the Message component, you don't have to rebuild the MessageList, just pass a Message prop with your class. For more info on the components or their props, check the source.
Check the chat-server documentation for info on the protocol.