Unduh react bell chat - unduh kode sumber react bell chat

react bell chat

Kode Sumber AI

v1.0.53

Unduh

? reaksi-bel-obrolan

Pustaka komponen React untuk membangun UI obrolan.

DEMO

Demo langsung

Fitur

Obrolan seperti perilaku gulir (mis. gulir otomatis ke bawah)
Muat lebih banyak pesan saat menggulir ke atas (dengan ambang batas khusus)
SANGAT mudah digunakan
Sesuaikan apa pun
Avatar penulis
Pesan yang terakhir dilihat untuk setiap penulis
Tunjukkan apakah penulis sedang mengetik atau tidak
Baris tanggal otomatis (bila pesan berikut berasal dari tanggal yang berbeda dari tanggal sebelumnya)

Perlu diingat bahwa proyek ini masih dalam tahap awal pengembangan. Jika Anda menemukan bug atau memiliki permintaan fitur, silakan buat masalah.

Instalasi

npm install react-bell-chat --save

ATAU

yarn add react-bell-chat

Penggunaan Dasar

 import { ChatFeed } from 'react-bell-chat'

// Your code stuff...

render ( ) {

  return (

    // Your JSX...

    < ChatFeed
      messages = { this . state . messages } // Array: list of message objects
      authors = { this . state . authors } // Array: list of authors
      yourAuthorId = { 2 } // Number: Your author id (corresponds with id from list of authors)
    / >

    // Your JSX...

  )

}

Minimalnya adalah memberikan daftar pesan dan penulis, lihat ini sebagai contoh:

 //...
this . state = {
  messages : [
    {
      id : 1 ,
      authorId : 1 ,
      message : "Sample message" ,
      createdOn : new Date ( ) ,
      isSend : true
    } ,
    {
      id : 2 ,
      authorId : 2 ,
      message : "Second sample message" ,
      createdOn : new Date ( ) ,
      isSend : false
    } ,
  ] ,
  authors : [
    {
      id : 1 ,
      name : 'Mark' ,
      isTyping : true ,
      lastSeenMessageId : 1 ,
      bgImageUrl : undefined
    } ,
    {
      id : 2 ,
      name : 'Peter' ,
      isTyping : false ,
      lastSeenMessageId : 2 ,
      bgImageUrl : undefined
    }
  ]
} ;
//...

Alat peraga lengkap untuk penulis:

naskah ketikan

 export interface Author {
    id: number;
    name: string;
    avatarName?: string;
    lastSeenAvatarName?: string;
    isTyping?: boolean;
    lastSeenMessageId?: number;
    bgImageUrl?: number;
}

Alat peraga lengkap untuk pesan:

naskah ketikan

 export interface Message {
  id?: number;
  authorId?: number; // If undefined, message is considered to be "System message"
  message: string;
  createdOn?: Date;
  isSend?: boolean;
}

API

Api diperoleh sebagai referensi komponen ChatFeed. Ini dibagi menjadi 2 bagian, feedApi dan scrollApi. Ref memberi Anda dan objek seperti ini:

 interface ChatFeedApi {
  onMessageSend : ( ) => void ; // Should be called when user sends a message (this scrolls the component down)
  scrollApi : ChatScrollAreaApi ;
}

Di mana gulir api berada

 interface ChatScrollAreaApi {
  scrollToBottom : ( behavior ?: ScrollBehavior ) => void ;
  scrollTo : ( top : number ) => void ;
  scrolledToBottom : ( ) => boolean ; // Check if we are scrolled to bottom
  scrolledToLoadThreshold : ( ) => boolean ; // Check if we are scrolled to threshold where we need to load messages
}

Seluruh daftar properti

 export interface ChatFeedProps {
  // Structural props
  className ?: string ;

  // Functional props
  messages : Message [ ] ;
  authors : Author [ ] ;
  yourAuthorId : number ;
  hasOldMessages ?: boolean ;
  loadOldMessagesThreshold ?: number ;

  // Visual props
  bubblesCentered ?: boolean ;
  bubbleStyles ?: ChatBubbleStyles ;
  maxHeight ?: string | number ;
  minHeight ?: string | number ;

  // Switches
  showDateRow ?: boolean ;
  showRecipientAvatar ?: boolean ;
  showRecipientLastSeenMessage ?: boolean ;
  showIsTyping ?: boolean ;
  showLoadingMessages ?: boolean ;

  // Extra container styles for custom components
  showRecipientAvatarChatMessagesStyle ?: React . CSSProperties ;
  showRecipientLastSeenMessageChatMessagesStyle ?: React . CSSProperties ;
  showIsTypingChatMessagesStyle ?: React . CSSProperties ;

  // Custom components
  customLoadingMessages ?: ( props : LoadingMessagesProps ) => JSX . Element ;
  customChatBubble ?: ( props : ChatBubbleProps ) => JSX . Element ;
  customSystemChatBubble ?: ( props : ChatBubbleProps ) => JSX . Element ;
  customAvatar ?: ( props : AvatarProps ) => JSX . Element ;
  customScrollArea ?: ( props : ChatScrollAreaProps ) => JSX . Element ;
  customIsTyping ?: ( props : ChatScrollAreaProps ) => JSX . Element ;
  customLastSeenAvatar ?: ( props : LastSeenAvatarProps ) => JSX . Element ;
  customDateRow ?: ( props : DateRowProps ) => JSX . Element ;

  // Callbacks
  onLoadOldMessages ?: ( ) => Promise < void > ; // Make sure to return promise that only resolves after state is updated.

  ref ?: ( api : ChatFeedApi ) => void ;
}

Komponen khusus

Sebagian besar UI dapat disesuaikan melalui memasukkan komponen khusus. Ini adalah komponen murni, perpustakaan memasukkan props ke komponen tersebut sehingga Anda dapat menyesuaikan hampir semua hal.