react chat window

반응-차트 윈도

react-chat-window 모든 프로젝트에 무료로 쉽게 포함시킬 수있는 인터콤과 같은 채팅 창을 제공합니다. 메시징 시설이없고 뷰 구성 요소 만 제공합니다.

특징

• 사용자 정의 가능
• 백엔드 Agnostic
• 무료

데모

목차

• 설치
• 예
• 구성 요소

설치

 $ 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를 사용하는 데 필요한 유일한 구성 요소입니다. 메시지 변경에 동적으로 반응합니다. 예제와 같이 모든 새 메시지는 소품 변경을 통해 추가해야합니다.

발사기 소품 :

소품	유형	필수의	설명
에이전트 프로파일	물체	예	제품 또는 서비스의 고객 서비스 에이전트를 나타냅니다. 필드 : ImageUrl (String), TeamName (String).
핸드 클릭	기능	예	런처의 클릭 이벤트를 가로 채십시오. 함수가 호출 될 때 전송 된 인수가 없습니다.
Isopen	부울	예	채팅 창의 열린/닫기 상태를 강제하십시오. 이것이 설정되지 않으면 클릭하면 열리고 닫습니다.
Messagelist	[메시지]	예	대화로 렌더링 할 메시지 배열.
무음	부울	아니요	들어오는 메시지를 위해 소리를 내지 마십시오. 기본값으로 false .
NewMessagesCount	숫자	아니요	새 메시지 수. 0보다 크면이 숫자는 런처의 배지에 표시됩니다. 기본값은 0 까지.
onfilesselected	기능 (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'
}