@gluedigital/chat

A chat client component powered by React & Redux

Stats

stars šŸŒŸissues āš ļøupdated šŸ› created šŸ£size šŸ‹ļøā€ā™€ļø
@gluedigital/chat
Minified + gzip package size for @gluedigital/chat in KB

Readme

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.

Usage

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(
  combineReducers({
    // Your other reducers here...
    chat: reducer
  }),
  applyMiddleware(middleware)
)

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'

Components

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.

Protocol

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.