Una biblioteca de componentes de React para crear interfaces de usuario de chat.
Demostración en vivo
Tenga en cuenta que este proyecto aún se encuentra en las primeras etapas de desarrollo. Si encuentra un error o tiene una solicitud de función, cree un problema.
npm install react-bell-chat --save
O
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...
)
}
Lo mínimo es proporcionar una lista de mensajes y autores; consulte esto para ver un ejemplo:
//...
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
}
]
} ;
//...
Accesorios completos para el autor:
mecanografiado
export interface Author {
id: number;
name: string;
avatarName?: string;
lastSeenAvatarName?: string;
isTyping?: boolean;
lastSeenMessageId?: number;
bgImageUrl?: number;
}
Accesorios completos para el mensaje:
mecanografiado
export interface Message {
id?: number;
authorId?: number; // If undefined, message is considered to be "System message"
message: string;
createdOn?: Date;
isSend?: boolean;
}
La API se obtiene como referencia del componente ChatFeed. Está dividido en 2 partes, feedApi y scrollApi. Ref te da un objeto como este:
interface ChatFeedApi {
onMessageSend : ( ) => void ; // Should be called when user sends a message (this scrolls the component down)
scrollApi : ChatScrollAreaApi ;
}
¿Dónde está la API de desplazamiento?
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 ;
}
La mayor parte de la interfaz de usuario se puede personalizar mediante la inyección de componentes personalizados. Estos son componentes puros, la biblioteca les inyecta accesorios para que puedas personalizar prácticamente cualquier cosa.
P: Mi chat se desplaza hacia arriba o hacia abajo automáticamente cada vez que uso setState en el componente principal.
R: Asegúrese de proporcionar expresiones constantes para componentes personalizados. No funciones en línea.
Las contribuciones siempre son bienvenidas y alentadas.
npm run start
Esta biblioteca comenzó como una bifurcación de https://github.com/brandonmowat/react-chat-ui