react bell chat Download - react bell chat Quellcode herunterladen

react bell chat

AI-Quellcode

v1.0.53

Herunterladen

? Reagieren-Glocken-Chat

Eine Bibliothek mit React-Komponenten zum Erstellen von Chat-Benutzeroberflächen.

DEMO

Live-Demo

Merkmale

Chat-ähnliches Scrollverhalten (z. B. automatisches Scrollen nach unten)
Beim Scrollen nach oben mehr Nachrichten laden (mit benutzerdefiniertem Schwellenwert)
SUPER einfach zu bedienen
Passen Sie alles an
Autoren-Avatare
Zuletzt gesehene Nachrichten für jeden Autor
Zeigt an, ob Autoren tippen oder nicht
Automatische Datumszeilen (wenn die folgende Nachricht von einem anderen Datum als die vorherige stammt)

Bedenken Sie, dass sich dieses Projekt noch in einem frühen Entwicklungsstadium befindet. Wenn Sie auf einen Fehler stoßen oder eine Funktionsanfrage haben, erstellen Sie bitte ein Problem.

Installation

npm install react-bell-chat --save

ODER

yarn add react-bell-chat

Grundlegende Verwendung

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

  )

}

Das absolute Minimum ist die Bereitstellung einer Liste von Nachrichten und Autoren. Sehen Sie sich dies als Beispiel an:

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

Vollständige Requisiten für den Autor:

Typoskript

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

Vollständige Requisiten für die Nachricht:

Typoskript

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

API

Die API wird als Referenz der ChatFeed-Komponente erhalten. Es ist in zwei Teile unterteilt: FeedApi und ScrollApi. Ref gibt Ihnen ein Objekt wie dieses:

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

Wo ist die Scroll-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
}

Ganze Liste der Eigenschaften

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

Benutzerdefinierte Komponenten

Der Großteil der Benutzeroberfläche kann durch das Einfügen benutzerdefinierter Komponenten angepasst werden. Dies sind reine Komponenten, die Bibliothek fügt ihnen Requisiten hinzu, sodass Sie so ziemlich alles anpassen können.