react messenger Download - react messenger Code Source Download

react messenger

Code Source AI

1.0.0

Télécharger

Réact messager

Ce projet utilise React et CSS pour recréer l'application Web Facebook Messenger. Il en est à ses débuts, mais la plupart des éléments constitutifs sont en place. Ce n'est pas un produit Facebook officiel et il n'est pas maintenu par des employés de Facebook.

Cliquez ici pour une démo en direct

Composants disponibles

Lorsque vous utilisez ces composants, il est important de garder à l'esprit que nous utilisons quelques dépendances différentes pour obtenir une meilleure expérience utilisateur. Spécifiquement:

Moment pour analyser les dates JavaScript et les imprimer de manière lisible.
Raser pour couper les longs messages pour maintenir la cohérence entre ConversationListItem .
Axios pour faciliter les demandes HTTP (pour les messages, les utilisateurs, etc.).

Composer

Le composant Compose permet à l'utilisateur d'envoyer des messages et des pièces jointes.

accessoires	taper	description
`rightItems`	`ToolbarButton[]`	Icônes qui apparaissent à droite de l'élément `input` permettant aux utilisateurs d'envoyer plus que du texte (par exemple, les photos, les espèces, l'emplacement, etc.).

Liste de conversation

Il s'agit d'un composant simple qui rend ConversationSearch et utilise axios pour récupérer les utilisateurs de l'API utilisateur aléatoire.

ConversationListItem

Ce composant donne un aperçu d'une seule conversation, y compris une photo, un nom (ou un titre de groupe) et un extrait du message le plus récent. Nous utilisons shave pour couper le message affiché afin que toutes les instances de ConversationListItem prennent la même quantité d'espace vertical.

accessoires	taper	description
`photo`	`String`	L'URL d'une photo à afficher pour la conversation. La démo utilise la photo fournie par l'API utilisateur aléatoire.
`name`	`String`	Le nom de la conversation, qu'il s'agisse d'un groupe ou d'un individu.
`text`	`String`	Le texte du message le plus récent; Vous n'avez pas à tronquer cela vous-même.

Conversationsearch

Il s'agit d'un simple élément input qui est conçu pour ressembler à la barre de recherche Facebook Messenger. Son espace réservé est centré jusqu'à ce que l'entrée soit concentrée, déplaçant l'espace réservé vers la gauche.

Message

Parce que la plupart du travail est effectué par MessageList , ce composant est assez simple. Comme indiqué ci-dessous, il y a beaucoup d' props qui vous permettent de styliser des groupes de messages distincts.

accessoires	taper	description
`data`	`Object`	Un objet contenant des informations sur le message. Nous utilisons `data.message` pour le corps du message et `data.timestamp` .
`isMine`	`Boolean`	Applique une teinte au message ( `#007aff` en démo) et l'aligne à droite, indiquant que le message a été envoyé par vous.
`startsSequence`	`Boolean`	Indique que le message représente le début d'une séquence de messages. Cela définit le rayon de bordure supérieur approprié, selon que le message a été envoyé par vous ou quelqu'un d'autre.
`endsSequence`	`Boolean`	Indique que le message représente la fin d'une séquence de messages. Cela définit le rayon de bordure inférieur approprié, selon que le message a été envoyé par vous ou quelqu'un d'autre.
`showTimestamp`	`Boolean`	Détermine si l'horodatage du message doit être affiché ou non. L'application de démonstration définit cette valeur sur `true` si plus d'une heure s'est écoulée entre les messages.

Messagelist

Il s'agit d'un composant trompeusement simple qui fait une grande partie de la durée de travail pour rendre des séquences de messages avec un style approprié (voir MessageList.renderMessages ). Plus précisément, nous utilisons des informations sur les messages ( author et timestamp ) pour rendre les groupes de messages plus proches avec la frontière modifiée et la marge. Ce n'est pas seulement présent dans Facebook Messenger, mais aussi dans d'autres applications comme iMessage. Vous pouvez supprimer cette fonctionnalité si vous le souhaitez.

Messager

Ce composant est essentiellement l'emballage de l'application Web. Il définit une disposition de la grille CSS et expose certaines classes d'assistance (par exemple, scrollable , nous permettant de séparer le défilement entre la barre latérale et les volets de contenu).

Barre d'outils

La démo utilise deux barres d'outils qui se trouvent au-dessus de la barre latérale et des volets de contenu. Ce composant affiche un titre et peut également inclure des boutons. Le titre reste centré dans la barre d'outils, que les éléments soient présents de chaque côté.

accessoires	taper	description
`title`	`String`	Le titre à afficher au centre de la barre d'outils.
`leftItems`	`ToolbarButton[]`	Les éléments `ToolbarButton` qui devraient apparaître sur le côté gauche de la barre d'outils.
`rightItems`	`ToolbarButton[]`	Les éléments `ToolbarButton` qui devraient apparaître sur le côté droit de la barre d'outils.

Barbuton d'outils

Probablement mieux décrit comme un "bouton d'icône", c'est juste cela - un bouton qui montre une icône. J'ajouterai des considérations d'accessibilité dans le temps.

accessoires	taper	description
`icon`	`String`	Le nom de l'icône à représenter via une police d'icône. J'utilise des ionicons dans la démo, mais cela pourrait facilement être échangé contre Fontawesome ou une bibliothèque similaire. Vous pouvez même faire votre propre police d'icône chez Icomoon.

Feuille de route

Il s'agit d'une bibliothèque plutôt simple, mais je prévois de continuer à apporter des améliorations et à ajouter des fonctionnalités. Si vous souhaitez contribuer, vous êtes plus que bienvenu.

Messages médiatiques (par exemple, photos, vidéos)
Infiltrations, popovers, modaux (pour afficher les options, envoyer de nouveaux messages, etc.)
Dégradation gracieuse (indicateur d'état du réseau, Chargement des filateurs, etc.)
Réactivité

Scripts disponibles

Dans le répertoire du projet, vous pouvez courir:

`npm start`

Exécute l'application en mode développement.
Ouvrez http: // localhost: 3000 pour le voir dans le navigateur.

La page se rechargera si vous effectuez des modifications.
Vous verrez également toutes les erreurs de peluche dans la console.

`npm test`

Lance le coureur de test en mode de montre interactif.
Voir la section concernant l'exécution des tests pour plus d'informations.

`npm run build`

Créez l'application pour la production dans le dossier build .
Il réagit correctement en mode de production et optimise la construction pour les meilleures performances.

La construction est minifiée et les noms de fichiers incluent les hachages.
Votre application est prête à être déployée!

Voir la section sur le déploiement pour plus d'informations.

`npm run eject`

Remarque: il s'agit d'une opération à sens unique. Une fois que vous eject , vous ne pouvez pas revenir en arrière!

Si vous n'êtes pas satisfait de l'outil de construction et des choix de configuration, vous pouvez eject à tout moment. Cette commande supprimera la dépendance à la construction unique de votre projet.

Au lieu de cela, il copiera tous les fichiers de configuration et les dépendances transitives (WebPack, Babel, Eslint, etc.) dans votre projet afin que vous ayez un contrôle complet sur eux. Toutes les commandes, sauf eject fonctionneront toujours, mais elles pointent vers les scripts copiés afin que vous puissiez les ajuster. À ce stade, vous êtes seul.

Vous n'avez jamais à utiliser eject . L'ensemble de fonctionnalités organisé convient aux déploiements petits et intermédiaires, et vous ne devriez pas vous sentir obligé d'utiliser cette fonctionnalité. Cependant, nous comprenons que cet outil ne serait pas utile si vous ne pouviez pas le personnaliser lorsque vous êtes prêt pour cela.