react bell chat تحميل - react bell chat تحميل كود المصدر

react bell chat

كود الذكاء الاصطناعي

v1.0.53

تنزيل

؟ رد فعل الجرس الدردشة

مكتبة مكونات React لإنشاء واجهات مستخدم للدردشة.

تجريبي

العرض المباشر

سمات

الدردشة مثل سلوك التمرير (على سبيل المثال، التمرير التلقائي إلى الأسفل)
تحميل المزيد من الرسائل عند التمرير إلى الأعلى (مع حد مخصص)
سهل الاستخدام للغاية
تخصيص أي شيء
الصور الرمزية للمؤلف
آخر رسائل شوهدت لكل مؤلف
إظهار ما إذا كان المؤلفون يكتبون أم لا
صفوف التاريخ التلقائية (عندما تكون الرسالة التالية من تاريخ مختلف عن التاريخ السابق)

ضع في اعتبارك أن هذا المشروع لا يزال في المراحل الأولى من التطوير. إذا واجهت خطأ أو كان لديك طلب ميزة، يرجى إنشاء مشكلة.

تثبيت

npm install react-bell-chat --save

أو

yarn add react-bell-chat

الاستخدام الأساسي

 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...

  )

}

الحد الأدنى هو تقديم قائمة بالرسائل والمؤلفين، تحقق من ذلك للحصول على مثال:

 //...
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
    }
  ]
} ;
//...

الدعائم الكاملة للمؤلف:

نسخة مطبوعة

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

الدعائم الكاملة للرسالة:

نسخة مطبوعة

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

واجهة برمجة التطبيقات

يتم الحصول على API كمرجع لمكون ChatFeed. وهي مقسمة إلى جزأين، FeedApi وscrollApi. المرجع يمنحك والكائن مثل هذا:

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

حيث يوجد التمرير API

 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
}

قائمة كاملة من العقارات

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