Скачать react bell chat - Загрузка исходного кода react bell chat

react bell chat

AI Исходный код

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

API получается как ссылка на компонент ChatFeed. Он разделен на две части: FeedApi и ScrollApi. Ref дает вам такой объект:

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

Пользовательские компоненты

Большую часть пользовательского интерфейса можно настроить путем внедрения пользовательских компонентов. Это чистые компоненты, библиотека добавляет в них реквизиты, так что вы можете настроить практически все, что угодно.