react beautiful chat

reaksi-obrolan yang indah

react-beautiful-chat menyediakan jendela obrolan seperti interkom yang dapat disertakan dengan mudah dalam proyek apa pun secara gratis. Ini tidak menyediakan fasilitas perpesanan, hanya komponen tampilan.

react-beautiful-chat adalah versi perbaikan dari react-chat-window (yang dapat Anda temukan di sini)

Fitur

• Dapat disesuaikan
• Agnostik ujung belakang
• Bebas

Demo

Daftar isi

• Instalasi
• Contoh
• Komponen

Instalasi

 $ npm install react-beautiful-chat

Contoh

 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 > )
  }
}

Untuk contoh lebih detail lihat folder demo.

Komponen

Peluncur

Launcher adalah satu-satunya komponen yang diperlukan untuk menggunakan react-beautiful-chat. Ini akan bereaksi secara dinamis terhadap perubahan pesan. Semua pesan baru harus ditambahkan melalui perubahan props seperti yang ditunjukkan pada contoh.

Alat peraga peluncur:

menopang	jenis	keterangan
*Profil agen	obyek	Mewakili agen layanan pelanggan produk atau layanan Anda. Bidang: nama tim, imageUrl
padaMessageWasSent	fungsi (pesan)	Dipanggil ketika sebuah pesan dikirim dengan objek pesan sebagai argumen.
Daftar pesan	[pesan]	Serangkaian objek pesan yang akan dirender sebagai percakapan.
tampilkan Emoji	bodoh	Bool yang menunjukkan apakah akan menampilkan tombol emoji atau tidak
tampilkanFile	bodoh	Bool yang menunjukkan apakah akan menampilkan tombol pemilih file atau tidak
diKeyPress	fungsi	Sebuah fungsi (userInput) => console.log(userInput) digunakan untuk melakukan sesuatu dengan input pengguna. Fungsi ini dipanggil dengan debounce pada 300ms
diHapus	fungsi	Fungsi (msg) => console.log(msg) digunakan untuk menghapus pesan terkirim. Jika alat peraga ini disetel, tombol hapus akan ditampilkan di sudut kanan atas setiap pesan yang dikirim oleh pengguna ke mitra. Anda dapat mengatur properti apa pun pada objek pesan (misalnya properti id ) dan kemudian menggunakan properti ini untuk memanggil beberapa api backend guna menghapus pesan.

Objek Pesan

Objek pesan dirender secara berbeda bergantung pada tipenya. Saat ini, hanya jenis teks dan emoji yang didukung. Setiap objek pesan mempunyai field author yang dapat memiliki nilai 'saya' atau 'mereka'.

 {
  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'
  }
}