react bell chat 다운로드 - react bell chat 소스코드 다운로드

react bell chat

AI 소스 코드

v1.0.53

다운로드

? 반응 벨 채팅

채팅 UI 구축을 위한 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 ;
}