react chat window

React-chat-Window

react-chat-window無料でどのプロジェクトにも簡単に含めることができるインターコムのようなチャットウィンドウを提供します。メッセージング機能はありません。ビューコンポーネントのみが提供されます。

特徴

• カスタマイズ可能
• バックエンド不可知論者
• 無料

デモ

目次

• インストール
• 例
• コンポーネント

インストール

 $ npm install react-chat-window

例

 import React , { Component } from 'react'
import { Launcher } from 'react-chat-window'

class Demo extends Component {

  constructor ( ) {
    super ( ) ;
    this . state = {
      messageList : [ ]
    } ;
  }

  _onMessageWasSent ( message ) {
    this . setState ( {
      messageList : [ ... this . state . messageList , message ]
    } )
  }

  _sendMessage ( text ) {
    if ( text . length > 0 ) {
      this . setState ( {
        messageList : [ ... this . state . messageList , {
          author : 'them' ,
          type : 'text' ,
          data : { text }
        } ]
      } )
    }
  }

  render ( ) {
    return ( < div >
      < Launcher
        agentProfile = { {
          teamName : 'react-chat-window' ,
          imageUrl : 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
        } }
        onMessageWasSent = { this . _onMessageWasSent . bind ( this ) }
        messageList = { this . state . messageList }
        showEmoji
      />
    </ div > )
  }
}

より詳細な例については、デモフォルダーを参照してください。

コンポーネント

ランチャー

Launcher 、React-chat-Windowを使用するために必要な唯一のコンポーネントです。メッセージの変化に動的に反応します。すべての新しいメッセージは、例に示すように、小道具の変更を介して追加する必要があります。

ランチャープロップ：

小道具	タイプ	必須	説明
AgentProfile	物体	はい	製品またはサービスのカスタマーサービスエージェントを表します。フィールド：ImageUrl（String）、TeamName（String）。
ハンドレックリック	関数	はい	ランチャーのクリックイベントを傍受します。関数が呼び出されたときに送信される引数はありません。
Isopen	ブール	はい	チャットウィンドウのオープン/クローズ状態を強制します。これが設定されていない場合、クリックすると開閉します。
Messagelist	[メッセージ]	はい	会話としてレンダリングされるメッセージオブジェクトの配列。
ミュート	ブール	いいえ	着信メッセージのためにサウンドを再生しないでください。デフォルトはfalseになります。
NewMessagesCount	番号	いいえ	新しいメッセージの数。 0を超える場合、この数値はランチャーのバッジに表示されます。デフォルトは0です。
filesselected	function（filelist）	いいえ	チャットウィンドウでのダイアログからファイルが選択された後に呼び出されました。
onmessagewassent	関数（メッセージ）	はい	メッセージが送信されたときに呼び出され、メッセージオブジェクトを引数として。
showemoji	ブール	いいえ	入力バーに絵文字ボタンを表示するかどうか。デフォルトはtrueです。

メッセージオブジェクト

メッセージオブジェクトは、タイプに応じて異なるレンダリングされます。現在、テキスト、ファイル、および絵文字タイプのみがサポートされています。各メッセージオブジェクトには、値「私」または「それら」を持つことができるauthorフィールドがあります。

 {
  author : 'them' ,
  type : 'text' ,
  data : {
    text : 'some text'
  }
}

{
  author : 'me' ,
  type : 'emoji' ,
  data : {
    code : 'someCode'
  }
}


{
  author : 'me' ,
  type : 'file' ,
  data : {
    url : 'somefile.mp3' ,
    fileName : 'Any old name'
  }
}

エージェントプロファイルオブジェクト

このように見えます：

 {
  imageUrl : 'https://somewhere.on/the_web.png' ,
  teamName : 'Da best'
}