download react bell chat - download do código-fonte react bell chat

react bell chat

Código-Fonte de IA

v1.0.53

Baixar

? reagir-sino-bate-papo

Uma biblioteca de componentes React para construir UIs de chat.

DEMONSTRAÇÃO

Demonstração ao vivo

Características

Comportamento de rolagem semelhante ao bate-papo (por exemplo, rolagem automática para baixo)
Carregue mais mensagens rolando para o topo (com limite personalizado)
SUPER fácil de usar
Personalize qualquer coisa
Avatares do autor
Últimas mensagens vistas para cada autor
Mostrar se os autores estão digitando ou não
Linhas de data automáticas (quando a mensagem seguinte é de uma data diferente da anterior)

Lembre-se de que este projeto ainda está nos estágios iniciais de desenvolvimento. Se você encontrar um bug ou tiver uma solicitação de recurso, crie um problema.

Instalação

npm install react-bell-chat --save

OU

yarn add react-bell-chat

Uso Básico

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

  )

}

O mínimo é fornecer uma lista de mensagens e autores, veja um exemplo:

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

Adereços completos para o autor:

texto datilografado

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

Adereços completos para mensagem:

texto datilografado

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

API

Api é obtida como referência do componente ChatFeed. Está dividido em 2 partes, feedApi e scrollApi. Ref dá a você um objeto assim:

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

Onde está a API de rolagem

 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
}

Lista completa de propriedades

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

Componentes personalizados

A maior parte da IU é personalizável por meio da injeção de componentes personalizados. Esses são componentes puros, a biblioteca injeta acessórios neles para que você possa personalizar praticamente qualquer coisa.