A chat client component powered by React & Redux


0.2.53 years ago4 years agoMinified + gzip package size for @gluedigital/chat in KB


Chat Client

A complete chat solution to use in your React + Redux apps.

It includes:

  • 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:

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { middleware, reducer } from '@gluedigital/chat'
let store = createStore(
    // Your other reducers here...
    chat: reducer

If you want to use our ready-made client, just render it at your component of choice:

import { Chat } from '@gluedigital/chat'
// ...
<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:

@import '~@gluedigital/chat/dist/style.css'


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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.