chat ui kit react

chat ui kit react

Crie sua própria UI de chat com componentes React em poucos minutos.
O Chat UI Kit do chatscope é um kit de ferramentas de UI de código aberto para o desenvolvimento de aplicativos de chat na web.

Cansado de lutar com barras de rolagem fixas, conteúdo editável, capacidade de resposta e hacks de CSS?
Esse kit é para você! Veja todos os recursos.

O Chat UI Kit traz para você o desenvolvimento da UI do chat em alta velocidade

Demonstração

• Aplicativo de bate-papo completo: https://demo.chatscope.io
• Zoe, Akane, Eliot e Joe: https://chatscope.io/demo/chat-friends
• Converse com o marciano (ele está disponível às vezes): https://mars.chatscope.io

Índice de demonstrações: https://chatscope.io/demo.

Instalar

Biblioteca de componentes

Usando fio:

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

Usando npm:

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

Estilos

Usando fio:

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

Usando npm:

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

Uso

MEE

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

Sim! Sua primeira GUI de bate-papo está pronta!

UMD

O uso do UMD está documentado em nosso Storybook.

Documentação

Confira nosso amigável livro de histórias.

Texto datilografado

A biblioteca é escrita em Javascript, mas as tipificações Typescript estão disponíveis no pacote desde a versão 1.9.3.

Veja também

@chatscope/use-chat é um gancho React para gerenciamento de estado em aplicativos de chat.
Confira e veja como é fácil você mesmo fazer a lógica do chat.

Mostre seu apoio

Se você criou uma interface de bate-papo incrível e adora esta biblioteca, por favor, este repositório!

Comunidade e suporte

• Twitter via @chatscope
• Conversando no Discord
• Facebook no Facebook
• Artigos no blog chatscope

Site

https://chatscope.io

Licença

MIT