react chat ui

реакция-чат-UI

Библиотека компонентов React для создания пользовательского интерфейса чата.

Спонсор

При поддержке Pusher Chatkit:

Функции

• Автоматическая прокрутка вниз

• СУПЕР прост в использовании

• Несколько групп пользователей (попробуйте в демо-версии)

Имейте в виду, что этот проект все еще находится на ранней стадии разработки. Если вы столкнулись с ошибкой или у вас есть запрос на добавление функции, создайте проблему и/или напишите мне здесь.

Установка

npm install react-chat-ui --save

Основное использование

 import { ChatFeed, Message } from 'react-chat-ui'// Ваш код...render() {

  return (// Ваш JSX...<ChatFeed messages={this.state.messages} // Массив: список объектов сообщения isTyping={this.state.is_typing} // Логическое значение: набирает ли получатель hasInputField={false} // Логическое значение: используйте наши входные данные или используйте свое собственное showSenderName // покажите имя пользователя, отправившего сообщение bubblesCentered={false} //Логическое значение, если пузырьки быть центрированным в ленте? // JSON: пользовательские стили пузырьков bubbleStyles={{ text: {fontSize: 30 },chatbubble: {borderRadius: 70,padding: 40 }} }/>// Ваш JSX...

  )}

Обязательно сохраните список правильных объектов сообщений в состоянии вашего класса. Вот так:

 //...this.state = {
  messages: [new Message({ id: 1, message: "Я получатель! (Человек, с которым вы разговариваете)",}), // Серый пузырьnew Message({ id: 0, message: "I' Я — синий пузырь!" }), // Синий пузырь
  ],
  //...};//...

API

• Лента чата

• Сообщение

• ЧатПузырь

• BubbleGroup

Вклад!¡1 ?

Вклад всегда приветствуется и поощряется. Если вы не хотите писать запрос на добавление функции самостоятельно, дайте знать об этом (либо в Твиттере, либо создав запрос на включение), и я сразу же напишу этот код.

TODO

• документация

• документация

• документация

Разработка

 разработчик пряжи