【React】チャットのUIを簡単に実装できるコンポーネント「react-chat-elements」

Cordova アプリでチャット機能を実装するときに便利な React コンポーネントを見つけたので、備忘録としてまとめ。
タイトルにもある通り、「react-chat-elements」というコンポーネントです。
CSS を使えば、自前で実装することもできるのですが、既にコンポーネントがあるなら使おう！と思って触ってみました。

GitHub のページがこちら。

GitHub – Detaysoft/react-chat-elements: Reactjs chat elements chat UI, react chat components
https://github.com/Detaysoft/react-chat-elements

まず、下記のコマンドでライブラリをインストールします。

npm install react-chat-elements --save

インストールが完了したら、お好みのコンポーネントを使って実装するだけです。
私は、MessageList を使用しました。
チャットのデータを配列で一気に渡せるのが決め手でした。

サンプルコードは下記のとおりです。

import { MessageList } from 'react-chat-elements';
import 'react-chat-elements/dist/main.css';

const messages = [
  {
    position: 'left',
    type: 'text',
    text: 'サンプルチャット',
    date: new Date('2020-03-12 13:00:00'),
  },
  {
    position: 'right',
    type: 'text',
    text: 'サンプルチャット2',
    date: new Date('2020-03-12 14:00:00'),
  },
  {
    position: 'left',
    type: 'photo',
    data: {
      uri: 'img/human.svg',
      status: {
          click: false,
          loading: 0,
      }
    },
    date: new Date('2020-03-12 15:00:00'),
  }
];

class ChatPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  render() {
    return (
      <MessageList
        toBottomHeight={'100%'}
        lockable={true}
        dataSource={messages} />
    );
  }
}

export default ChatPage;

変数 messages に、サンプルのチャットデータを格納したので、こちらを 42行目の dataSource に渡しています。
messages に格納されている内容によって、吹き出しの位置を自動で変更してくれたり（position）、表示するデータ形式を メッセージや写真に変更してくれる（type）のも便利です。
CSS を使って自分で実装すると、このあたりが面倒だったりしますしね。
ただ、date に格納されている日付が英語表記になってしまっているので、こちらは今後修正したいと考えています。

実装としては以上です。

以上、React でチャット UI を簡単に実装できるコンポーネント「react-chat-elements」のご紹介でした。
ご参考になれば幸いです。