react chat ui

réagir-chat-ui

Une bibliothèque de composants React pour créer des interfaces utilisateur de chat.

Parrainer

Sponsorisé par Pusher Chatkit :

Caractéristiques

• Défilement automatique vers le bas

• SUPER facile à utiliser

• Regroupement d'utilisateurs multiples (essayez-le dans la démo)

Gardez à l’esprit que ce projet en est encore aux premiers stades de développement. Si vous rencontrez un bug ou avez une demande de fonctionnalité, veuillez créer un problème et/ou me tweeter ici.

Installation

npm install react-chat-ui --save

Utilisation de base

 import { ChatFeed, Message } from 'react-chat-ui'// Votre code...render() {

  return (// Vos messages JSX...<ChatFeed={this.state.messages} // Tableau : liste des objets de message isTyping={this.state.is_typing} // Booléen : le destinataire saisit-il hasInputField={false} // Booléen : utilisez notre entrée ou utilisez votre propre showSenderName // affiche le nom de l'utilisateur qui a envoyé le message bubblesCentered={false} //Booléen si les bulles sont centré dans le flux ? // JSON : styles de bulles personnalisés bubbleStyles={{ text : {fontSize : 30 }, chatbubble : {borderRadius : 70,padding : 40 }} }/>// Votre JSX...

  )}

Assurez-vous de conserver une liste des objets de message appropriés dans l'état de votre classe. Comme ça :

 //...cet.état = {
  messages : [new Message({ id : 1, message : "Je suis le destinataire ! (La personne à qui vous parlez)",}), // Bulle grisenew Message({ id : 0, message : "I' c'est toi -- la bulle bleue!" }), // Bulle bleue
  ],
  //...};//...

API

• Flux de discussion

• Message

• ChatBulle

• Groupe de bulles

Contribuer !¡1 ?

Les contributions sont toujours les bienvenues et encouragées. Si vous ne voulez pas rédiger vous-même une demande de fonctionnalité, faites-le-vous savoir (soit sur Twitter, soit en créant une Pull Request) et je ferai coder cette merde immédiatement.

FAIRE

• documentation

• documentation

• documentation

Développement

 développeur de fil