README

React styled chat widget

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

Technical Documentation

Installing
Exports
Usage
Tiny Warning :)
Chat Widget API
License

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!

Property	Type	Required	Default	Example/Description
indent	number	no	window.innerWidth * 0.015	Indent from screen borders for the button that opens widget
size	number	no	window.innerWidth * 3 / 100	Size of the opening button. Percent of the screen width
minSize	number	no	60	Minimal size of the opening button. Specified in pixels
mainContentWidth	number	no	25	Width of the whole widget specified in percents of it's corresponding property - screen Width
mainContentHeight	number	no	60	Height of the whole widget specified in percents of it's corresponding property - screen Height
chatOffset	number	no	10	When widget is opened, there is a space between it and button.
messages	`Messages[]`	yes	-	Messages that should be passed according to `Messages[]` type
loading	boolean	yes	-	When loading is `true` the `spinner` is shown
onMessageSend	`MessageSendHandler`	yes	-	Interesting option. This function gets invoked when message appears on the screen, but let's say "has not been saved in your db yet". So, calling `setDeliveryStatus` which comes as a second argument you are able to toggle "delivery check mark" on.
onSendClick	`SendClickHandler`	yes	-	Event handler that gets invoked when user smashes send button
primary	color code	no	gray	Sets background color of widget
secondary	color code	no	purple	Color of the stroke at the top of textarea
defaultPosition	`"topLeft"` `"topRight"` `"bottomLeft"` `"bottomRight"`	no	`"bottomRight"`	Default position of the chat opening button
isDraggable	boolean	no	true	Here it comes, draggable chat opening button. Yes, chat widget is draggable by it's button. You can turn it off by setting this property to false, otherwise users will play with this widget forever. Is it cool or not, idk, you decide :)
spinner	`JSX.Element`	yes	-	Component that is shown while `loading` option is `true`
primaryAuthorNameColor	color code	no	white	Author thumb color of sender
secondaryAuthorNameColor	color code	no	black	Author thumb color of "moderator"
primaryMessageBackground	color code	no	purple	BG of sender's messages
secondaryMessageBackground	color code	no	white	BG of moderator's messages
primaryMessageTextColor	color code	no	white	Text color for sender
secondaryMessageTextColor	color code	no	black	Text color for moderator
buttonBackground	color code	no	purple	BG of the opening button
buttonTextColor	color code	no	white	Text color of the opening button
placeHolder	string	no	What can I help you with?	Textarea placeholder
greeting	string	no	Feel free to ask anything you want to!	Placeholder in case `messages` property is an empty array!
sendButton	`JSX.Element`	no	Cool icon there	You can replace send button to your own component. All the event handlers will be binded automatically
backgroundClassName	string	no	-	You can assign your custom classname in case you want to customize bg
inputContainerClassName	string	no	-	Textarea container classname for customization
buttonClassName	string	no	-	Opening button classname for customization purposes

License

MIT

Usage no npm install needed!