https://github.com/mattmezza/react-beautiful-chat
A simple and beautiful React chat component backend agnostic and with Emoji and File support.
https://github.com/mattmezza/react-beautiful-chat
chat chat-component emoji file react reactjs
Last synced: 4 months ago
JSON representation
A simple and beautiful React chat component backend agnostic and with Emoji and File support.
- Host: GitHub
- URL: https://github.com/mattmezza/react-beautiful-chat
- Owner: mattmezza
- Created: 2018-02-15T14:09:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-10-20T22:23:19.000Z (over 4 years ago)
- Last Synced: 2025-02-27T07:43:58.414Z (4 months ago)
- Topics: chat, chat-component, emoji, file, react, reactjs
- Language: JavaScript
- Homepage: https://mattmezza.github.io/react-beautiful-chat/
- Size: 5.3 MB
- Stars: 117
- Watchers: 6
- Forks: 34
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# react-beautiful-chat
`react-beautiful-chat` 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.
`react-beautiful-chat` is an improved version of `react-chat-window` (which you can find [here](https://github.com/kingofthestack/react-live-chat))
## Features
- Customizeable
- Backend agnostic
- Free
## [Demo](https://mattmezza.github.io/react-beautiful-chat/)
## Table of Contents
- [Installation](#installation)
- [Example](#example)
- [Components](#api)
## Installation
```
$ npm install react-beautiful-chat
```
## Example
``` javascript
import React, {Component} from 'react'
import {render} from 'react-dom'
import {Launcher} from '../../src'
class Demo extends Component {
constructor() {
super();
this.state = {
messageList: messageHistory
};
}
_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-beautiful-chat. 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 | description |
|-----|--------|---------------|
| *agentProfile | object | Represents your product or service's customer service agent. Fields: teamName, imageUrl|
| onMessageWasSent | function(message) | Called when a message a message is sent with a message object as an argument. |
| messageList | [message] | An array of message objects to be rendered as a conversation. |
| showEmoji | bool | A bool indicating whether or not to show the emoji button
| showFile | bool | A bool indicating whether or not to show the file chooser button
| onKeyPress | func | A function `(userInput) => console.log(userInput)` used to do something with the user input. The function is invoked debounced at 300ms
| onDelete | func | A function `(msg) => console.log(msg)` used to delete a sent message. If this props is set, a delete button will be shown in the top right corner of each message sent by the user to a partner. You can set any property on the message object (an `id` property for instance) and then use this property to call some backend api to delete the message.
### Message Objects
Message objects are rendered differently depending on their type. Currently, only text 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: {
name: 'file.mp3',
url: 'https:123.rf/file.mp3'
}
}
```