หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

โต้ตอบแชท-ui

ไลบรารีของส่วนประกอบ React สำหรับสร้าง UI การแชท

สปอนเซอร์

สนับสนุนโดย Pusher Chatkit:

คุณสมบัติ

  • เลื่อนอัตโนมัติไปที่ด้านล่าง

  • ใช้งานง่ายสุด ๆ

  • การจัดกลุ่มผู้ใช้หลายราย (ลองใช้ในการสาธิต)

โปรดทราบว่าโครงการนี้ยังอยู่ในช่วงเริ่มต้นของการพัฒนา หากคุณพบข้อบกพร่องหรือมีคำขอคุณลักษณะ โปรดสร้างปัญหาและ/หรือทวีตหาฉันที่นี่

การติดตั้ง

npm install react-chat-ui --save

การใช้งานขั้นพื้นฐาน

 นำเข้า { ChatFeed, ข้อความ } จาก 'react-chat-ui'// ข้อมูลโค้ดของคุณ...render() {

  return (// JSX ของคุณ...<ChatFeed Messages={this.state.messages} // Array: list of message object isTyping={this.state.is_typing} // Boolean: คือผู้รับที่พิมพ์ hasInputField={false} // บูลีน: ใช้อินพุตของเรา หรือใช้ showSenderName ของคุณเอง // แสดงชื่อของผู้ใช้ที่ส่งข้อความ bubblesCentered={false} //บูลีนควรเป็นฟองอากาศ อยู่กึ่งกลางฟีดใช่ไหม // JSON: รูปแบบฟองแบบกำหนดเอง bubbleStyles={{ text: {fontSize: 30 }, chatbubble: {borderRadius: 70,padding: 40 }} }/>// JSX...

  -

ตรวจสอบให้แน่ใจว่าได้เก็บรายการวัตถุข้อความที่เหมาะสมไว้ในสถานะชั้นเรียนของคุณ ชอบเช่นนั้น:

 //...this.state = {
  ข้อความ: [ข้อความใหม่ ({ id: 1, ข้อความ: "ฉันเป็นผู้รับ! (บุคคลที่คุณกำลังคุยด้วย)",}), // ฟองสีเทา ข้อความใหม่ ({ id: 0, ข้อความ: "ฉัน" ฉันคุณ -- ฟองสีน้ำเงิน!" }), // ฟองสีน้ำเงิน
  -
  -

เอพีไอ

  • ฟีดแชท

  • ข้อความ

  • ChatBubble

  • บับเบิ้ลกรุ๊ป

มีส่วนร่วม!¡1 ?

ผลงานได้รับการต้อนรับและให้กำลังใจเสมอ หากคุณไม่ต้องการเขียนคำขอคุณลักษณะด้วยตัวเอง โปรดแจ้งให้คุณทราบ (ไม่ว่าจะบน Twitter หรือโดยการสร้างคำขอดึง) แล้วฉันจะได้รับรหัสอึนั้นทันที

สิ่งที่ต้องทำ

  • เอกสารประกอบ

  • เอกสารประกอบ

  • เอกสารประกอบ

การพัฒนา

 ผู้พัฒนาเส้นด้าย
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด