chat ui kit react

chat ui kit react

Cree su propia interfaz de usuario de chat con componentes de React en unos minutos.
El Chat UI Kit de chatscope es un conjunto de herramientas de interfaz de usuario de código abierto para desarrollar aplicaciones de chat web.

¿Estás cansado de luchar con barras de desplazamiento pegajosas, contenido, capacidad de respuesta y trucos de CSS?
¡Este kit es para ti! Ver todas las funciones.

Chat UI Kit te ofrece el desarrollo de la interfaz de usuario del chat a gran velocidad

Manifestación

• Aplicación de chat con todas las funciones: https://demo.chatscope.io
• Zoe, Akane, Eliot y Joe: https://chatscope.io/demo/chat-friends
• Chatea con el marciano (a veces está disponible): https://mars.chatscope.io

Índice de demostraciones: https://chatscope.io/demo.

Instalar

Biblioteca de componentes

Usando hilo:

yarn add @chatscope/chat-ui-kit-react

Usando npm:

npm install @chatscope/chat-ui-kit-react

Estilos

Usando hilo:

yarn add @chatscope/chat-ui-kit-styles

Usando npm:

npm install @chatscope/chat-ui-kit-styles

Uso

MEDE

 import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css" ;
import {
  MainContainer ,
  ChatContainer ,
  MessageList ,
  Message ,
  MessageInput ,
} from "@chatscope/chat-ui-kit-react" ;

< div style = { { position : "relative" , height : "500px" } } >
  < MainContainer >
    < ChatContainer >
      < MessageList >
        < Message
          model = { {
            message : "Hello my friend" ,
            sentTime : "just now" ,
            sender : "Joe" ,
          } }
        />
      </ MessageList >
      < MessageInput placeholder = "Type message here" />
    </ ChatContainer >
  </ MainContainer >
</ div > ;

¡Sí! ¡Tu primera GUI de chat está lista!

UMD

El uso de UMD está documentado en nuestro Storybook.

Documentación

Consulta nuestro amigable libro de cuentos.

Mecanografiado

La biblioteca está escrita en Javascript, pero los tipos de mecanografiado están disponibles en el paquete desde la versión 1.9.3.

Ver también

@chatscope/use-chat es un gancho de React para la gestión del estado en aplicaciones de chat.
Compruébelo y vea lo fácil que puede hacer usted mismo la lógica del chat.

Muestra tu apoyo

Si has creado una interfaz de usuario de chat increíble y te encanta esta biblioteca, ¡por favor este repositorio!

Comunidad y apoyo

• Twitter a través de @chatscope
• Charlando en Discord
• Facebook en Facebook
• Artículos en el blog chatscope

Sitio web

https://chatscope.io

Licencia

MIT