Descarga react messenger - Descargar el código fuente react messenger

react messenger

Código Fuente de IA

1.0.0

Descargar

Reaccionar mensajero

Este proyecto utiliza React y CSS para recrear la aplicación web de Facebook Messenger. Está en sus primeras etapas, pero la mayoría de los bloques de construcción están en su lugar. Este no es un producto oficial de Facebook ni es mantenido por ningún empleado de Facebook.

Haga clic aquí para una demostración en vivo

Componentes disponibles

Al usar estos componentes, es importante tener en cuenta que estamos utilizando algunas dependencias diferentes para lograr una mejor experiencia de usuario. Específicamente:

Momento para analizar las fechas de JavaScript e imprimirlas de manera legible.
Afeitado para recortar mensajes largos para mantener la consistencia entre ConversationListItem .
Axios para facilitar las solicitudes HTTP (para mensajes, usuarios, etc.).

Componer

El componente Compose permite al usuario enviar mensajes y archivos adjuntos.

accesorios	tipo	descripción
`rightItems`	`ToolbarButton[]`	Los iconos que aparecen a la derecha del elemento `input` permiten a los usuarios enviar más que texto (por ejemplo, fotos, efectivo, ubicación, etc.).

Lista de conversación

Este es un componente simple que entregue ConversationSearch y usa axios para obtener usuarios de la API de usuario aleatoria.

Lista de conversación

Este componente proporciona una visión general de una sola conversación, que incluye una foto, nombre (o título de grupo) y un fragmento del mensaje más reciente. Usamos shave para recortar el mensaje mostrado para que todas las instancias de ConversationListItem ocupen la misma cantidad de espacio vertical.

accesorios	tipo	descripción
`photo`	`String`	La URL de una foto que se exhibirá para la conversación. La demostración utiliza la foto proporcionada por la API de usuario aleatoria.
`name`	`String`	El nombre de la conversación, ya sea un grupo o individuo.
`text`	`String`	El texto del mensaje más reciente; No tienes que truncar esto tú mismo.

Conversacionesearch

Este es un elemento input simple que está diseñado para parecerse a la barra de búsqueda de Messenger de Facebook. Su marcador de posición se centra hasta que la entrada se enfoca, moviendo el marcador de posición hacia la izquierda.

Mensaje

Debido a que la mayor parte del trabajo lo realiza MessageList , este componente es bastante sencillo. Como se indica a continuación, hay muchos props que le permiten diseñar distintos grupos de mensajes.

accesorios	tipo	descripción
`data`	`Object`	Un objeto que contiene información sobre el mensaje. `data.timestamp` `data.message`
`isMine`	`Boolean`	Aplica un tinte al mensaje ( `#007aff` en demostración) y lo alinea hacia la derecha, lo que indica que el mensaje fue enviado por usted.
`startsSequence`	`Boolean`	Indica que el mensaje representa el inicio de una secuencia de mensajes. Esto establece el radio de borde superior apropiado, dependiendo de si el mensaje fue enviado por usted u otra persona.
`endsSequence`	`Boolean`	Indica que el mensaje representa el final de una secuencia de mensajes. Esto establece el radio de borde inferior apropiado, dependiendo de si el mensaje fue enviado por usted u otra persona.
`showTimestamp`	`Boolean`	Determina si se debe mostrar o no la marca de tiempo del mensaje. La aplicación de demostración establece este valor en `true` si ha pasado más de una hora entre los mensajes.

Mensajería

Este es un componente engañosamente simple que realiza gran parte del trabajo pesado para hacer secuencias de mensajes con un estilo apropiado (ver MessageList.renderMessages ). Específicamente, utilizamos información sobre los mensajes ( author y timestamp ) para hacer más cercanos grupos de mensajes junto con el borde modificado y el margen. Esto no solo está presente en Facebook Messenger, sino también en otras aplicaciones como iMessage. Puede eliminar esta funcionalidad si lo desea.

Mensajero

Este componente es esencialmente el envoltorio para la aplicación web. Define un diseño de cuadrícula CSS y expone algunas clases de ayuda (por ejemplo, scrollable , lo que nos permite separar el desplazamiento entre la barra lateral y los paneles de contenido).

Barra de herramientas

La demostración utiliza dos barras de herramientas que se encuentran sobre la barra lateral y los paneles de contenido. Este componente muestra un título y también puede incluir botones. El título permanece centrado en la barra de herramientas, independientemente de si los elementos están presentes a ambos lados.

accesorios	tipo	descripción
`title`	`String`	El título se mostrará en el centro de la barra de herramientas.
`leftItems`	`ToolbarButton[]`	Los elementos `ToolbarButton` que deben aparecer en el lado izquierdo de la barra de herramientas.
`rightItems`	`ToolbarButton[]`	Los elementos `ToolbarButton` que deben aparecer en el lado derecho de la barra de herramientas.

Barbutton de herramientas

Probablemente mejor descrito como un "botón de icono", es solo eso: un botón que muestra un icono. Agregaré consideraciones de accesibilidad a tiempo.

accesorios	tipo	descripción
`icon`	`String`	El nombre del icono se representará a través de una fuente de icono. Utilizo Ionicons en la demostración, pero esto podría intercambiarse fácilmente por FontaWeome o una biblioteca similar. Incluso puedes hacer tu propia fuente de icono en Icomoon.

Hoja de ruta

Esta es una biblioteca bastante directa, pero planeo continuar haciendo mejoras y agregar características. Si desea contribuir, es más que bienvenido.

Mensajes de medios (por ejemplo, fotos, videos)
Terratenías, popovers, modales (para ver opciones, envío de mensajes nuevos, etc.)
Degradación elegante (indicador de estado de red, carga de hilanderos, etc.)
Sensibilidad

Scripts disponibles

En el directorio del proyecto, puede ejecutar:

`npm start`

Ejecuta la aplicación en el modo de desarrollo.
Abra http: // localhost: 3000 para verlo en el navegador.

La página se volverá a cargar si realiza ediciones.
También verá errores de linta en la consola.

`npm test`

Inicia el corredor de prueba en el modo de reloj interactivo.
Consulte la sección sobre las pruebas de ejecución para obtener más información.

`npm run build`

Construye la aplicación para la producción a la carpeta build .
Se reacciona correctamente en modo de producción y optimiza la compilación para el mejor rendimiento.

La construcción se minifica y los nombres de archivo incluyen los hashes.
¡Su aplicación está lista para ser implementada!

Consulte la sección sobre implementación para obtener más información.

`npm run eject`

Nota: Esta es una operación unidireccional. Una vez que te eject , ¡no puedes volver!

Si no está satisfecho con la herramienta de compilación y las opciones de configuración, puede eject en cualquier momento. Este comando eliminará la dependencia de la compilación única de su proyecto.

En su lugar, copiará todos los archivos de configuración y las dependencias transitivas (Webpack, Babel, Eslint, etc.) directamente en su proyecto para que tenga el control total sobre ellas. Todos los comandos, excepto eject seguirán funcionando, pero señalarán los scripts copiados para que pueda ajustarlos. En este punto, estás solo.

No tienes que usar eject . El conjunto de características curadas es adecuada para implementaciones pequeñas y medias, y no debe sentirse obligado a usar esta función. Sin embargo, entendemos que esta herramienta no sería útil si no pudiera personalizarla cuando esté listo para ello.