react beautiful chat

반응 아름다운 채팅

react-beautiful-chat 모든 프로젝트에 무료로 쉽게 포함할 수 있는 인터콤과 같은 채팅 창을 제공합니다. 메시징 기능은 제공하지 않고 보기 구성 요소만 제공합니다.

react-beautiful-chat react-chat-window (여기에서 찾을 수 있음)의 향상된 버전입니다.

특징

• 맞춤형
• 백엔드에 구애받지 않음
• 무료

데모

목차

• 설치
• 예
• 구성요소

설치

 $ npm install react-beautiful-chat

예

 import React , { Component } from 'react'
import { render } from 'react-dom'
import { Launcher } from '../../src'

class Demo extends Component {

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

  _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-beautiful-chat' ,
          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-beautiful-chat을 사용하는 데 필요한 유일한 구성 요소입니다. 메시지의 변경 사항에 동적으로 반응합니다. 모든 새 메시지는 예제에 표시된 대로 소품 변경을 통해 추가되어야 합니다.

런처 소품:

소품	유형	설명
*에이전트 프로필	물체	귀하의 제품이나 서비스의 고객 서비스 담당자를 나타냅니다. 필드: 팀 이름, imageUrl
onMessage가 전송되었습니다	기능(메시지)	메시지 개체를 인수로 사용하여 메시지가 전송될 때 호출됩니다.
메시지 목록	[메시지]	대화로 렌더링될 메시지 개체의 배열입니다.
표시이모티콘	부울	이모티콘 버튼 표시 여부를 나타내는 부울
쇼파일	부울	파일 선택 버튼을 표시할지 여부를 나타내는 부울
onKeyPress	기능	사용자 입력으로 작업을 수행하는 데 사용되는 함수 (userInput) => console.log(userInput) . 함수는 300ms에 디바운싱되어 호출됩니다.
삭제 시	기능	(msg) => console.log(msg) 보낸 메시지를 삭제하는 데 사용되는 함수입니다. 이 속성이 설정되면 사용자가 파트너에게 보내는 각 메시지의 오른쪽 상단에 삭제 버튼이 표시됩니다. 메시지 객체에 임의의 속성(예: id 속성)을 설정한 다음 이 속성을 사용하여 일부 백엔드 API를 호출하여 메시지를 삭제할 수 있습니다.

메시지 객체

메시지 객체는 유형에 따라 다르게 렌더링됩니다. 현재는 텍스트와 이모티콘 유형만 지원됩니다. 각 메시지 개체에는 '나' 또는 '그들' 값을 가질 수 있는 author 필드가 있습니다.

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

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

{
  author : 'me' ,
  type : 'file' ,
  data : {
    name : 'file.mp3' ,
    url : 'https:123.rf/file.mp3'
  }
}