soul-chatbox
v0.0.8-alpha1
Published
Simple Chatbox React component
Downloads
23
Readme
soul-chatbox
React Chatbox component
Just a component
<Chatbox
messages={[]}
onSend = {/*send button callback*/}
onLeave = {/*leave button callback*/}
userInfo = {{nickname:'<String>',sex:'boy||girl'}}
/>
Message Structure
const message = {
who: 'me' || 'you' || 'system',
sex: 'boy' || 'girl' || 'unknown',
nickname: '<String>',
text: '<String>'
};
Usage
// ./App.jsx
import Chatbox from 'soul-chatbox';
export default () => {
const [messages, setMessages] = useState([]);
const onSend = mes => {
//do something like socket.emit(mes)
setMessages([...messages, mes]);
};
const onLeave = () => alert('leave');
return (
<div className="wrapper">
{/* use wrapper style to wrap background-color */}
<Chatbox
messages={messages}
onSend={onSend}
onLeave={onLeave}
userInfo={{
nickname: 'Dennis',
sex: 'boy'
}}
/>
{/* userInfo 將決定onSend拿到的mes的nickname與sex */}
</div>
);
};