react chat ui

reaccionar-chat-ui

Una biblioteca de componentes de React para crear interfaces de usuario de chat.

Patrocinador

Patrocinado por Pusher Chatkit:

Características

• Desplazamiento automático hacia abajo

• SÚPER fácil de usar

• Agrupación de múltiples usuarios (pruébelo en la demostración)

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 y/o envíeme un tweet aquí.

Instalación

npm install react-chat-ui --save

Uso básico

 importar {ChatFeed, Mensaje} de 'react-chat-ui'// Tu código...render() {

  return (// Su JSX...<ChatFeed mensajes={this.state.messages} // Matriz: lista de objetos de mensaje isTyping={this.state.is_typing} // Booleano: es el destinatario que escribe hasInputField={false} // Booleano: usa nuestra entrada, o usa tu propio showSenderName // muestra el nombre del usuario que envió el mensaje bubblesCentered={false} //Booleano si las burbujas deben ser ¿centrado en el feed? // JSON: estilos de burbujas personalizados bubbleStyles={{ text: {fontSize: 30 }, chatbubble: {borderRadius: 70,padding: 40 }} }/>// Tu JSX...

  )}

Asegúrese de mantener una lista de objetos de mensaje adecuados en su estado de clase. Así:

 //...este.estado = {
  mensajes: [nuevo Mensaje({ id: 1, mensaje: "¡Soy el destinatario! (La persona con la que estás hablando)",}), // Burbuja gris nuevo Mensaje({ id: 0, mensaje: "Yo' Soy tú - ¡la burbuja azul!" }), // Burbuja azul
  ],
  //...};//...

API

• Feed de chat

• Mensaje

• Burbuja de chat

• grupo burbuja

¡Aportando!¡1 ?

Las contribuciones siempre son bienvenidas y alentadas. Si no quieres escribir una solicitud de función tú mismo, házselo saber (ya sea en Twitter o creando una solicitud de extracción) y codificaré esa mierda de inmediato.

HACER

• documentación

• documentación

• documentación

Desarrollo

 desarrollador de hilo