Download do react messenger - Download do código fonte react messenger

react messenger

Código-Fonte de IA

1.0.0

Baixar

Reacta mensageiro

Este projeto usa o React e o CSS para recriar o aplicativo da Web do Facebook Messenger. Está em seus estágios iniciais, mas a maioria dos blocos de construção está em vigor. Este não é um produto oficial do Facebook nem é mantido por qualquer funcionário do Facebook.

Clique aqui para uma demonstração ao vivo

Componentes disponíveis

Ao usar esses componentes, é importante ter em mente que estamos utilizando algumas dependências diferentes para alcançar uma melhor experiência do usuário. Especificamente:

Momento para analisar as datas de JavaScript e imprimi -las de maneira legível.
Raspe para aparar mensagens longas para manter a consistência entre ConversationListItem .
Axios para facilitar solicitações HTTP (para mensagens, usuários, etc.).

Compor

O componente de composição permite ao usuário enviar mensagens e anexos.

adereços	tipo	descrição
`rightItems`	`ToolbarButton[]`	Os ícones que parecem à direita do elemento `input` , permitindo que os usuários enviem mais do que texto (por exemplo, fotos, dinheiro, localização etc.).

Lista de conversas

Este é um componente simples que renderiza ConversationSearch e usa axios para buscar usuários da API de usuário aleatório.

ConversaListItem

Este componente fornece uma visão geral de uma única conversa, incluindo uma foto, nome (ou título do grupo) e um trecho da mensagem mais recente. Usamos shave para aparar a mensagem exibida para que todas as instâncias do ConversationListItem ocupem a mesma quantidade de espaço vertical.

adereços	tipo	descrição
`photo`	`String`	O URL de uma foto a ser exibida para a conversa. A demonstração usa a foto fornecida pela API do usuário aleatório.
`name`	`String`	O nome da conversa, seja um grupo ou indivíduo.
`text`	`String`	O texto da mensagem mais recente; Você não precisa truncar isso você mesmo.

Conversationsearch

Este é um elemento input simples que tem um estilo para se parecer com a barra de pesquisa do Facebook Messenger. Seu espaço reservado está centrado até que a entrada seja focada, movendo o espaço reservado para a esquerda.

Mensagem

Como a maior parte do trabalho é feita pelo MessageList , esse componente é bastante direto. Como afirmado abaixo, existem muitos props que permitem estilizar grupos distintos de mensagens.

adereços	tipo	descrição
`data`	`Object`	Um objeto que contém informações sobre a mensagem. Usamos `data.message` para o corpo e `data.timestamp` da mensagem. Para o objeto JavaScript Data, representando o horário em que a mensagem foi enviada.
`isMine`	`Boolean`	Aplica uma tonalidade à mensagem ( `#007aff` na demonstração) e alinha -a à direita, indicando que a mensagem foi enviada por você.
`startsSequence`	`Boolean`	Indica que a mensagem representa o início de uma sequência de mensagens. Isso define o raio apropriado da borda superior, dependendo se a mensagem foi enviada por você ou por outra pessoa.
`endsSequence`	`Boolean`	Indica que a mensagem representa o final de uma sequência de mensagens. Isso define o raio apropriado da borda inferior, dependendo se a mensagem foi enviada por você ou por outra pessoa.
`showTimestamp`	`Boolean`	Determina se o registro de data e hora da mensagem deve ou não ser mostrado. O aplicativo de demonstração define esse valor para `true` se mais de uma hora tiver passado entre as mensagens.

Messagelista

Este é um componente enganosamente simples que faz muito do levantamento pesado para renderizar sequências de mensagens com estilo apropriado (consulte MessageList.renderMessages ). Especificamente, usamos informações sobre as mensagens ( author e timestamp ) para renderizar grupos de mensagens mais próximos com raios de borda e margem modificados. Isso não está apenas presente no Facebook Messenger, mas em outros aplicativos como o iMessage também. Você pode remover essa funcionalidade, se quiser.

Mensageiro

Este componente é essencialmente o invólucro para o aplicativo da web. Ele define um layout da grade CSS e expõe algumas classes auxiliares (por exemplo, scrollable , permitindo separar a rolagem entre a barra lateral e os painéis de conteúdo).

Barra de ferramentas

A demonstração usa duas barras de ferramentas que ficam acima da barra lateral e dos painéis de conteúdo. Este componente exibe um título e também pode incluir botões. O título permanece centrado na barra de ferramentas, independentemente de os elementos estarem presentes em ambos os lados.

adereços	tipo	descrição
`title`	`String`	O título a ser exibido no centro da barra de ferramentas.
`leftItems`	`ToolbarButton[]`	Os elementos `ToolbarButton` que devem aparecer no lado esquerdo da barra de ferramentas.
`rightItems`	`ToolbarButton[]`	Os elementos `ToolbarButton` que devem aparecer no lado direito da barra de ferramentas.

ToolBarbutton

Provavelmente melhor descrito como um "botão do ícone", é apenas isso - um botão que mostra um ícone. Vou adicionar considerações de acessibilidade no tempo.

adereços	tipo	descrição
`icon`	`String`	O nome do ícone a ser representado por meio de uma fonte de ícone. Eu uso o Ionicons na demonstração, mas isso pode ser facilmente trocado para a Fontawesome ou uma biblioteca semelhante. Você pode até fazer sua própria fonte de ícone no ICOMOON.

Roteiro

Esta é uma biblioteca bastante direta, mas pretendo continuar fazendo melhorias e adicionando recursos. Se você deseja contribuir, é mais do que bem -vindo.

Mensagens de mídia (por exemplo, fotos, vídeos)
Dicas de ferramentas, popovers, modais (para opções de visualização, envio de novas mensagens, etc.)
Degradação graciosa (indicador de status da rede, carregando spinners, etc)
Capacidade de resposta

Scripts disponíveis

No diretório do projeto, você pode executar:

`npm start`

Executa o aplicativo no modo de desenvolvimento.
Abra http: // localhost: 3000 para visualizá -lo no navegador.

A página será recarregada se você fizer edições.
Você também verá erros de fiapos no console.

`npm test`

Inicia o corredor de teste no modo de relógio interativo.
Consulte a seção sobre como executar testes para obter mais informações.

`npm run build`

Construa o aplicativo para produção na pasta build .
Os pacotes corretamente reagem no modo de produção e otimiza a construção para obter o melhor desempenho.

A construção é minificada e os nomes de arquivos incluem os hashes.
Seu aplicativo está pronto para ser implantado!

Consulte a seção sobre implantação para obter mais informações.

`npm run eject`

Nota: Esta é uma operação unidirecional. Depois de eject , você não pode voltar!

Se você não estiver satisfeito com a ferramenta de compilação e as opções de configuração, poderá eject a qualquer momento. Este comando removerá a dependência de compilação única do seu projeto.

Em vez disso, ele copiará todos os arquivos de configuração e as dependências transitivas (Webpack, Babel, Eslint, etc.) diretamente em seu projeto, para que você tenha controle total sobre eles. Todos os comandos, exceto que eject ainda funcionarão, mas apontarão para os scripts copiados para que você possa ajustá -los. Neste ponto, você está sozinho.

Você nunca precisa usar eject . O conjunto de recursos com curadoria é adequado para implantações pequenas e médias, e você não deve se sentir obrigado a usar esse recurso. No entanto, entendemos que essa ferramenta não seria útil se você não pudesse personalizá -la quando estiver pronto para isso.