npm install --save react-chat-widget
yarn add react-chat-widget
1- Добавьте компонент виджета в корневой компонент.
import React from 'react' ;
import { Widget } from 'react-chat-widget' ;
import 'react-chat-widget/lib/styles.css' ;
function App ( ) {
return (
< div className = "App" >
< Widget />
</ div >
) ;
}
export default App ;
2. Единственное необходимое свойство, которое вам нужно использовать, — это handleNewUserMessage
, который будет получать входные данные от пользователя.
import React from 'react' ;
import { Widget } from 'react-chat-widget' ;
import 'react-chat-widget/lib/styles.css' ;
function App ( ) {
const handleNewUserMessage = ( newMessage ) => {
console . log ( `New message incoming! ${ newMessage } ` ) ;
// Now send the message throught the backend API
} ;
return (
< div className = "App" >
< Widget
handleNewUserMessage = { handleNewUserMessage }
/>
</ div >
) ;
}
export default App ;
3- Импортируйте методы добавления сообщений в виджет. (Смотрите сообщения)
import React from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;
import 'react-chat-widget/lib/styles.css' ;
function App ( ) {
useEffect ( ( ) => {
addResponseMessage ( 'Welcome to this awesome chat!' ) ;
} , [ ] ) ;
const handleNewUserMessage = ( newMessage ) => {
console . log ( `New message incoming! ${ newMessage } ` ) ;
// Now send the message throught the backend API
addResponseMessage ( response ) ;
} ;
return (
< div className = "App" >
< Widget
handleNewUserMessage = { handleNewUserMessage }
/>
</ div >
) ;
}
export default App ;
4. Настройте виджет в соответствии с дизайном вашего приложения! Вы можете добавить оба реквизита, чтобы управлять названием виджета и аватаром, который он будет использовать. Конечно, вы можете свободно менять стили виджета в CSS.
import React , { useEffect } from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;
import 'react-chat-widget/lib/styles.css' ;
import logo from './logo.svg' ;
function App ( ) {
useEffect ( ( ) => {
addResponseMessage ( 'Welcome to this **awesome** chat!' ) ;
} , [ ] ) ;
const handleNewUserMessage = ( newMessage ) => {
console . log ( `New message incoming! ${ newMessage } ` ) ;
// Now send the message throught the backend API
} ;
return (
< div className = "App" >
< Widget
handleNewUserMessage = { handleNewUserMessage }
profileAvatar = { logo }
title = "My new awesome title"
subtitle = "And my cool subtitle"
/>
</ div >
) ;
}
export default App ;
опора | тип | необходимый | значение по умолчанию | описание |
---|---|---|---|---|
handleNewUserMessage | (...args: любой[]) => любой | ДА | Функция для обработки пользовательского ввода. При отправке будет получено полное текстовое сообщение. | |
заголовок | нить | НЕТ | 'Добро пожаловать' | Название виджета |
субтитры | нить | НЕТ | «Это субтитр вашего чата» | Подзаголовок виджета |
отправительМестоДержатель | нить | НЕТ | «Введите сообщение...» | Заполнитель ввода сообщения |
профильАватар | нить | НЕТ | Изображение профиля, которое будет установлено в ответах | |
профильКлиентАватар | нить | НЕТ | Изображение профиля, которое будет установлено в сообщениях клиента. | |
заголовокАватар | нить | НЕТ | Изображение, которое будет отображаться рядом с названием чата. | |
показатьЗакрытьКнопку | логическое значение | НЕТ | ЛОЖЬ | Показать или скрыть кнопку закрытия в полноэкранном режиме |
полноэкранный режим | логическое значение | НЕТ | ЛОЖЬ | Разрешить использование полноэкранного режима в полноэкранном режиме |
автофокус | логическое значение | НЕТ | истинный | Автофокус или нет, ввод пользователя |
пусковая установка | (handleToggle) => Тип элемента | НЕТ | Пользовательский компонент запуска для использования вместо стандартного | |
handleQuickButtonClicked | (...args: любой[]) => любой | НЕТ | Функция, обрабатывающая нажатие пользователем быстрой кнопки, получает «значение» при нажатии. | |
шоутиместамп | логическое значение | НЕТ | истинный | Показывать отметку времени в сообщениях |
идентификатор чата | нить | НЕТ | 'rcw-чат-контейнер' | Идентификатор контейнера чата для a11y |
handleToggle | (...args: любой[]) => любой | НЕТ | 'rcw-чат-контейнер' | Функция, обрабатывающая переключение виджета, получит статус переключения. |
пусковая установкаOpenLabel | нить | НЕТ | «Открыть чат» | Значение Alt для лаунчера при закрытии |
пусковая установкаCloseLabel | нить | НЕТ | «Закрыть чат» | Значение Alt для лаунчера при открытии |
лаунчерOpenImg | нить | НЕТ | '' | URL-адрес локального или удаленного изображения, если он не указан, будет показано изображение по умолчанию |
лаунчерCloseImg | нить | НЕТ | '' | URL-адрес локального или удаленного изображения, если он не указан, будет показано изображение по умолчанию |
ОтправитьКнопкаAlt | нить | НЕТ | 'Отправлять' | Кнопка «Отправить» alt для любых целей |
дескриптортекстинпутчанже | (событие) => любое | НЕТ | Опора, которая срабатывает при изменении ввода | |
handleОтправить | (событие) => любое | НЕТ | Опора, которая срабатывает при отправке сообщения и используется для пользовательской проверки. | |
изменяемый размер | логическое значение | НЕТ | ЛОЖЬ | Опора, которая позволяет изменять размер виджета, перетаскивая его левую границу. |
смайлики | логическое значение | НЕТ | ЛОЖЬ | включить выбор смайлов |
показатьЗначок | логическое значение | НЕТ | истинный | Опора, позволяющая показать или скрыть значок непрочитанного сообщения. |
Чтобы изменить стили, которые должен иметь виджет, просто переопределите классы CSS, заключающие их в контейнеры, и добавьте к ним свой собственный стиль! Все классы имеют префикс rcw-
поэтому они не переопределяют другие ваши классы, если у вас их нет. Чтобы переопределить, вы можете сделать, например:
. rcw-conversation-container > . rcw-header {
background-color : red;
}
. rcw-message > . rcw-response {
background-color : black;
color : white;
}
Таким образом, вы можете оставить JS чистым и сохранить стили в CSS.
Начиная с версии 3.0, сообщения теперь имеют дополнительный идентификатор, который можно добавить при создании. Если вы хотите добавить новые сообщения, вы можете использовать следующие методы:
добавитьОтветмессаже
добавитьUserMessage
добавитьссылкасниппет
{
title : 'My awesome link' ,
link : 'https://github.com/Wolox/react-chat-widget' ,
target : '_blank'
}
target
значением является _blank
, при котором ссылка откроется в новом окне.рендерCustomComponent
УстановитьQuickButtons
label
и value
ключа.Markdown поддерживается как для ответов, так и для сообщений пользователей.
Вы также можете управлять некоторыми действиями виджета:
toggleWidget
toggleInputDisabled
toggleMsgLoader
удалить сообщения *
addResponseMessage
, либо удалите в зависимости от позиции, либо и то, и другое. Например, deleteMessages(2, 'myId')
удалит сообщение с идентификатором myId
и предыдущее сообщение.пометить все как прочитанное
setBadgeCount
badge
изменяется и теперь можно управлять им из виджета. Этот метод позволяет вручную установить номер значка. Вы можете использовать собственный компонент для средства запуска, если вам нужен тот, который не используется по умолчанию, просто используйте свойство средства запуска :
import React from 'react' ;
import { Widget } from 'react-chat-widget' ;
...
function MyApp ( ) {
const getCustomLauncher = ( handleToggle ) =>
< button onClick = { handleToggle } > This is my launcher component! </ button >
return (
< Widget
. . .
launcher = { handleToggle => getCustomLauncher ( handleToggle ) }
/>
)
}
getCustomLauncher()
— это метод, который возвращает компонент Launcher
, как показано в примере. По умолчанию функция, передаваемая этим реквизитом, получит параметр handleToggle
, который является методом, который будет переключать виджет.
Этот проект поддерживается Мартином Каллегари и написан Wolox.