Narcissistic Pickle Meister

    @gluedigital/chat

    0.2.5 • Public • Published

    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.

    Keywords

    none

    Install

    npm i @gluedigital/chat

    DownloadsWeekly Downloads

    25

    Version

    0.2.5

    License

    MIT

    Unpacked Size

    66.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar