react-talk
v1.0.0
Published
React talk/chat component
Downloads
60
Readme
react-talk
React component for chat box UI with pluggable support for SockJS client via 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]
}));
// Insert code to send the message below
...
}
render() {
return (
<div>
<TalkBox topic="react-websocket-template" currentUserId="ping" currentUser="Pinger"
messages={ this.state.messages } onSendMessage={ this.sendMessage } />
</div>
);
}
}
ReactDom.render(<App />, 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 headercurrentUserId
: User id for the current user who is using the chat boxcurrentUser
: Display user name for the current user who is using the chat boxmessages
: An array of messages. Each message object should be with the following schema:{ "authorId": <unique author id for the author>, "author": <author or user diplay name for the message>, "message": <message> "timestamp": <the difference, measured in milliseconds, between the current time and midnight, January 1, 1970 UTC" }
Issues
Report any issues or bugs to https://github.com/lahsivjar/react-talk/issues
Major changes in version 1.0.0
currentUserId
property added toTalkBox
which refers to the unique id of the current useronSendMessage
callback must return a boolean indicating send status- Message object has been modified with following changes:
timestamp
is added to indicate message time (unit is in milliseconds)authoId
is added to indicate a unique id for the authorauthor
has been changed to refer to the display name of the user
License
This project is licensed under the MIT License - see the LICENSE file for details