Chat-React Компонент сеанса чата на основе React

React.js

Chat-React

Компонент сеанса чата на основе ReactАдрес GitHub

chat-react
chat-react

демо

chat-react
chat-react

инструкции

  • Установить
npm install chat-react
  • представлять
import Chat from 'chat-react';
  • использовать
export default class MyChat extends Component {
  state = {
    inputValue: '',
    messages: [],
    timestamp: new Date().getTime()
  }
  setInputfoucs = () => {
    this.chat.refs.input.inputFocus();  //set input foucus
  }
  setScrollTop = () => {
    this.chat.refs.message.setScrollTop(1200);  //set scrollTop position
  }
  sendMessage = (v) => {
    const {value} = v;
    if (!value) return;
    const {messages = []} = this.state;
    messages.push(v);
    this.setState({messages, timestamp: new Date().getTime(), inputValue: ''});
  }
  render() {
    const {inputValue, messages, timestamp} = this.state;
    const userInfo = {
      avatar: "http://img.binlive.cn/6.png",
      userId: "59e454ea53107d66ceb0a598",
      name: 'ricky'
    };
    return (
      <Chat
        ref={el => this.chat = el}
        className="my-chat-box"
        dataSource={messages}
        userInfo={userInfo}
        value={inputValue}
        sendMessage={this.sendMessage}
        timestamp={timestamp}
        placeholder="请输入"
        messageListStyle={{width: '100%', height: window.outerHeight}}
      />
    );
  }
}

API

Свойства и методы Типы описывать
userInfo object текущая информация о пользователе
value string содержимое поля ввода
placeholder string заполнитель для поля ввода
emoji any Определить содержание эмодзи
customEmoticon array пользовательские смайлики
textareaChange (value) => {} Функция обратного вызова, срабатывающая при изменении содержимого поля ввода, первым параметром функции является текущее входное значение.
selectEmoje (emojeInfo) => {} Функция обратного вызова после выбора смайлика, первым параметром функции является выбранная информация о содержимом смайлика.
inputFocus func Встроенный метод ввода дочернего компонента для установки фокуса вводаthis.chat.refs.input.inputFocus()
dataSource array Содержание данных списка сообщений
messageListStyle object Стиль списка сообщений, вам нужно установить фиксированную высоту для списка
timestamp number Отметка времени, устанавливаемая при изменении источника данных
timeBetween number Показывать временные подсказки через указанный интервал времени (единица измерения: минуты, по умолчанию: 5)
timeagoMax number Сколько времени до отображения в указанном диапазоне времени (единица измерения: часы, по умолчанию: 24)
timeFormat string Пользовательский формат времени (гггг-ММ-дд чч:мм)
loading bool Загружается ли источник данных
loader node пользовательский загрузчик
noData bool Нет ли больше данных
noDataEle node Показать пользовательский узел элемента, когда больше нет данных
scrollOptions object Этот параметр использует параметр полосы прокрутки iscroll.js,Ознакомьтесь с документацией iscroll.js
scrolltoUpper func Функция обратного вызова, которая запускается, когда полоса прокрутки прокручивается вверх
onScroll func Функция обратного вызова срабатывает при прокрутке полосы прокрутки
avatarClick (value) => {} Функция обратного вызова, запускаемая пользователем, нажимающим на аватар, значением параметра является информация о нажатом пользователе.
unreadCountChange func Функция обратного вызова при изменении непрочитанного сообщения
setScrollTop setScrollTop(value) Встроенный метод сообщения дочернего компонента, используемый для установки положения полосы прокрутки.this.chat.refs.message.setScrollTop(1200)
Описание параметров компонента
  • userInfoВы должны определить для этого параметраuserIdа такжеavatarproperties, вы также можете добавить некоторые свойства, которые вам нужны.
userInfo = {
 avatar: 'http://example/avatar.jpg', //user avatar,  required parameters
 userId: '5bf7cf25a069a537ffe7c324', //user id,  required parameters
 name: 'rigcky',
 other: 'otherInfo'
}
  • emojiЕсли вы установите параметр emoji наfalse, смайлики не будут отображаться. Если вы хотите добавить больше эмодзи, вы можете установить для этого параметра массив, содержимое которого — это добавленные вами эмодзи.
// add more emoji
emoji = [
  {text: 'panda', content: '🐼'},
  {text: 'tiger', content: '🐯'},
  {text: 'pig', content: '🐷'}
]
  • customEmoticonПользовательский пакет смайликов, параметр представляет собой тип массива
customEmoticon = [
 {text: 'smile', url: 'http://example/emoticon.png'},
 {text: 'angry', url: 'http://example/emoticon2.png'},
 {text: 'weep', url: 'data:image/png;base64,iVBORw0KGgoA...'}
]
  • dataSourceИсточник данных списка сообщений, формат данных следующий:
const customEmoticon = [{
    timestamp: 1545925494422,
    userInfo: {
        avatar: "http://example/2.png",
        name: "游客1544365758856",
        userId: "1544365758856"
    },
    value: "hello~"
},  {
    timestamp: 1545925534218,
    userInfo: {
        avatar: "http://example/2.png",
        name: "游客1544365758856",
        userId: "1544365758856"
    },
    value: "😀",
    error: true //设置消息状态为失败，显示错误状态图标
}]
  • messageListStyleКонтейнерный стиль списка сообщений, для него необходимо установить фиксированную высоту, чтобы гарантировать, что он не будет растягиваться содержимым, например{width: '100%', height: 500}
  • timestampтокdataSourceПри изменении данных этот параметр должен быть сброшен на текущую метку времени.
  • timeFormatПараметры формата времени, такие как показ 2019-2-1 20:20, установлены в гггг-ММ-дд чч:мм.
Категории