A Flexibly Styled Chat Widget For React

React styled chat widget

Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.

Installing

npm

$ npm install react-styled-chat-widget styled-components

yarn

$ yarn add react-styled-chat-widget styled-components

As you have probably already noticed,
this library uses styled-components to provide a nice development experience when it comes to customizing.

If you aren't using browserify/webpack, a UMD version of react-styled-chat-widget is available.
This bundle is also what is loaded when installing from npm. It expects external React and ReactDOM.

Exports

The default export is <ChatWidget/>. There are additional types that you can use as well.

import ChatWidget from "react-styled-chat-widget";
import {Message, MessageSendHandler, SendClickHandler} from "react-styled-chat-widget";

Chat Widget usage

You can take a look at the DEMO story-book I made. Don't forget to use fullscreen mode there or close other windows, because component itself
relies on the screen size a lot and storybook changes it in the runtime.

import React, {useCallback, useEffect, useState} from 'react';
import ChatWidget from "react-styled-chat-widget";
import {Message, MessageSendHandler, SendClickHandler} from "react-styled-chat-widget";
import Spinner from "../components/spinner";

const App = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // load some messages from history here using setMessages
    setLoading(false);
  }, []);


  // used to switch message delivery indicator
  const onMessageSend = useCallback<MessageSendHandler>((currentID, setDeliveryStatus) => {
    setDeliveryStatus();
  }, []);

  // called when user presses the send button
  const onSendClick = useCallback<SendClickHandler>((message: string) => {
    setMessages((messages) => {
      return [
        ...messages,
        {id: Math.floor(Math.random() * 10000), isPrimary: true, date: new Date(), sent: true, message, author: 'You'},
      ]
    })
  }, []);


  return (
    <ChatWidget
      defaultPosition={'bottomRight'}
      messages={messages} // required
      loading={loading} // required
      onMessageSend={onMessageSend} // required
      onSendClick={onSendClick} // required
      spinner={<Spinner/>} // required
    >
      // Header of the widget should be here :)
      <div>
        <p>Welcome to support window!</p>
        <hr/>
        <p>Here you can chat directly with moderators. They usually answer in a few hours.</p>
      </div>
    </ChatWidget>
  );
}

export default App;

Tiny Warning

It's my first ui component released on NPM. So, you may experience some bugs during development even though I didn't find any by myself :)

Chat Widget API

Below you will find all the properties that chat widget accepts. Pay attention to the ones that are marked as required!
Without them widget won't work!

GitHub

https://github.com/eddienubes/react-styled-chat-widget