React Wrapper

Code

import { QuikChat } from 'quikchat/dist/quikchat.react';

const App = () => {
  const chatRef = React.useRef();

  const handleSend = (chat, msg) => {
    chat.messageAddNew(msg, 'me', 'right');
    setTimeout(() => {
      chat.messageAddNew('Echo: ' + msg, 'bot', 'left');
    }, 300);
  };

  return (
    <div>
      <QuikChat
        ref={chatRef}
        onSend={handleSend}
        options={{
          theme: 'quikchat-theme-light',
          titleArea: { title: 'React Chat', align: 'left', show: true }
        }}
      />
      <button onClick={() => chatRef.current.titleAreaToggle()}>Toggle Title</button>
      <button onClick={() => chatRef.current.changeTheme('quikchat-theme-dark')}>Dark Theme</button>
    </div>
  );
};