soul-chatbox

React Chatbox component

Component demo
Full App demo

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>
  );
};