Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dharness/react-chat-window
Intercom-style live chat window written in react
https://github.com/dharness/react-chat-window
chat react
Last synced: 13 days ago
JSON representation
Intercom-style live chat window written in react
- Host: GitHub
- URL: https://github.com/dharness/react-chat-window
- Owner: dharness
- License: unlicense
- Created: 2017-06-19T04:52:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-01T04:45:02.000Z (8 months ago)
- Last Synced: 2024-05-23T07:02:04.548Z (6 months ago)
- Topics: chat, react
- Language: JavaScript
- Size: 6.84 MB
- Stars: 666
- Watchers: 17
- Forks: 251
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-chat-window
`react-chat-window` provides an intercom-like chat window that can be included easily in any project for free. It provides no messaging facilities, only the view component.
## Features
- Customizeable
- Backend agnostic
- Free
## [Demo](https://kingofthestack.github.io/react-chat-window/)
## Table of Contents
- [Installation](#installation)
- [Example](#example)
- [Components](#components)
## Installation
```
$ npm install react-chat-window
```
## Example
``` javascript
import React, {Component} from 'react'
import {Launcher} from 'react-chat-window'
class Demo extends Component {
constructor() {
super();
this.state = {
messageList: []
};
}
_onMessageWasSent(message) {
this.setState({
messageList: [...this.state.messageList, message]
})
}
_sendMessage(text) {
if (text.length > 0) {
this.setState({
messageList: [...this.state.messageList, {
author: 'them',
type: 'text',
data: { text }
}]
})
}
}
render() {
return (
)
}
}
```
For more detailed examples see the demo folder.
## Components
# Launcher
`Launcher` is the only component needed to use react-chat-window. It will react dynamically to changes in messages. All new messages must be added via a change in props as shown in the example.
Launcher props:
| prop | type | required | description |
|------------------|--------|----------|-------------|
| agentProfile | [object](#agent-profile-objects) | yes | Represents your product or service's customer service agent. Fields: imageUrl (string), teamName (string). |
| handleClick | function | yes | Intercept the click event on the launcher. No argument sent when function is called. |
| isOpen | boolean | yes | Force the open/close state of the chat window. If this is not set, it will open and close when clicked. |
| messageList | [[message](#message-objects)] | yes | An array of message objects to be rendered as a conversation. |
| mute | boolean | no | Don't play sound for incoming messages. Defaults to `false`. |
| newMessagesCount | number | no | The number of new messages. If greater than 0, this number will be displayed in a badge on the launcher. Defaults to `0`. |
| onFilesSelected | function([fileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)) | no | Called after file has been selected from dialogue in chat window. |
| onMessageWasSent | function([message](#message-objects)) | yes | Called when a message is sent, with a message object as an argument. |
| showEmoji | boolean | no | Whether or not to show the emoji button in the input bar. Defaults to `true`.
### Message Objects
Message objects are rendered differently depending on their type. Currently, only text, file, and emoji types are supported. Each message object has an `author` field which can have the value 'me' or 'them'.
``` javascript
{
author: 'them',
type: 'text',
data: {
text: 'some text'
}
}
{
author: 'me',
type: 'emoji',
data: {
code: 'someCode'
}
}
{
author: 'me',
type: 'file',
data: {
url: 'somefile.mp3',
fileName: 'Any old name'
}
}
```
### Agent Profile Objects
Look like this:
```js
{
imageUrl: 'https://somewhere.on/the_web.png',
teamName: 'Da best'
}
```