https://github.com/lahsivjar/react-talk
React component for chat box UI with pluggable support for SockJS client
https://github.com/lahsivjar/react-talk
chat chatbox react-components reactjs ui-components
Last synced: about 1 year ago
JSON representation
React component for chat box UI with pluggable support for SockJS client
- Host: GitHub
- URL: https://github.com/lahsivjar/react-talk
- Owner: lahsivjar
- License: mit
- Created: 2017-12-13T17:04:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-15T09:23:01.000Z (over 8 years ago)
- Last Synced: 2025-02-21T06:46:30.464Z (over 1 year ago)
- Topics: chat, chatbox, react-components, reactjs, ui-components
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-talk
- Size: 37.1 KB
- Stars: 5
- Watchers: 4
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-talk
React component for chat box UI with pluggable support for SockJS client via [react-stomp](https://github.com/lahsivjar/react-stomp)
## Installation
```
npm install --save react-talk
```
## Example Usage
```
// Using ES6
import React from "react";
import ReactDom from "react-dom";
import { TalkBox } from "react-talk";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
messages: [{
"author": "Ponger",
"authorId": "pong",
"message": "How you doin'!",
"timestamp": Date.now().toString()
}]
};
}
onMessageReceive = (msg) => {
this.setState(prevState => ({
messages: [...prevState.messages, msg]
}));
}
sendMessage = (msg, selfMsg) => {
// selfMsg is the message object constructed from the message typed by the current user
// NOTE: selfMsg doesn't include timestamp and needs to be added by the user of the module
// in client or server side as required
selfMsg["timestamp"] = Date.now().toString();
this.setState(prevState => ({
messages: [...prevState.messages, selfMsg]
}));
// If message sending failed return false otherwise return true
try {
// Insert code to send the message below
...
return true;
} catch (e) {
return false;
}
}
render() {
return (
);
}
}
ReactDom.render(, document.getElementById("root"));
```
## Demonstration
https://react-websocket.herokuapp.com/index
A complete implementation using SockJs, STOMP and springboot can be found at: https://github.com/lahsivjar/spring-websocket-template/tree/master/with-sockjs
## Parameters
* `topic`: The topic of the chat. Will be displayed in the chat box header
* `currentUserId`: User id for the current user who is using the chat box
* `currentUser`: Display user name for the current user who is using the chat box
* `messages`: An array of messages. Each message object should be [schematized](#message-schema).
### Message Schema
```
{
"authorId": ,
"author": ,
"message": ,
"timestamp":
}
```
## Issues
Report any issues or bugs to https://github.com/lahsivjar/react-talk/issues
## Major changes in version 1.0.0
* `currentUserId` property added to `TalkBox` which refers to the unique id of the current user
* `onSendMessage` callback must return a boolean indicating send status
* Message object has been modified with following changes:
1. `timestamp` is added to indicate message time (unit is in milliseconds)
2. `authoId` is added to indicate a unique id for the author
3. `author` has been changed to refer to the display name of the user
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details