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	บูลีน	ใช่	บังคับสถานะเปิด/ปิดของหน้าต่างแชท หากไม่ได้ตั้งค่าไว้จะเปิดและปิดเมื่อคลิก
นักแต่งเพลง	[ข้อความ]	ใช่	อาร์เรย์ของวัตถุข้อความที่จะแสดงเป็นบทสนทนา
ปิดเสียง	บูลีน	เลขที่	อย่าเล่นเสียงสำหรับข้อความที่เข้ามา ค่าเริ่มต้นเป็น false
NewMessagesCount	ตัวเลข	เลขที่	จำนวนข้อความใหม่ หากมากกว่า 0 หมายเลขนี้จะแสดงในตราบนตัวเรียกใช้งาน ค่าเริ่มต้นถึง 0
เลือก onfilesse	ฟังก์ชั่น (FileList)	เลขที่	เรียกว่าหลังจากไฟล์ถูกเลือกจากบทสนทนาในหน้าต่างแชท
onMessageweSent	ฟังก์ชั่น (ข้อความ)	ใช่	เรียกว่าเมื่อมีการส่งข้อความพร้อมวัตถุข้อความเป็นอาร์กิวเมนต์
การแสดง	บูลีน	เลขที่	ไม่ว่าจะแสดงปุ่มอิโมจิในแถบอินพุตหรือไม่ ค่าเริ่มต้นเป็น 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'
}