Hi there! 👋
Welcome to the React Chat UI Kit docs.
React Chat UI Kit is a set of React components to easily build nice-looking chat windows.
React is a JavaScript library for building user interfaces. For more details, head to the [React official website](https://reactjs.org/).Our aim was to create a complex set of components to solve common React chat apps implementation issues.
With React Chat UI Kit, we want to:
- apply good user experience solutions,
- allow rich theme customization,
- provide maximum components flexibility,
- cover various communication needs.
You can use React Chat UI Kit for two main purposes:
- building a custom chat widget,
- building an app that handles chats view (e.g. a LiveChat archive viewer).
We have created a sample chat widget, integrated with LiveChat and BotEngine:
In this widget, BotEngine handles the incoming
chats. When the bot returns LiveChat.transfer
action, the chat is transferred
to a human agent together with the transcript of the initial conversation with
the bot.
To install React Chat UI Kit with npm, run the following command:
npm install --save @livechat/ui-kit
This section will guide you through the basic concepts of LiveChat UI Kit, theme
structure and components.
This is the basic app structure:
import { ThemeProvider } from '@livechat/ui-kit'
<ThemeProvider>
{ /* other components /* }
</ThemeProvider>
The whole app should always be wrapped in <ThemeProvider>
component.
You can either pass your own theme configuration using theme
props (see "Theme
structure" section below), or use the default looks. Your theme configuration
will be merged with the default theme. What does it mean? For example, you
don't have to build the whole object if you only want to change the color of a
single element. All you have to do is to pass the relevant property (with the
color change) — all other elements will pick up the default styles.
Each LiveChat widget theme is basically a JavaScript object. A theme object groups all properties of a single theme.
Theme objects consist of the following elements:
Property name | Description |
---|---|
vars |
CSS variables available to be used in the components. By default there are 3 colors defined: "primary-color", "secondary-color", and "tertiary-color", but you can add more (and not only colors, of course!). |
[COMPONENT_NAME] |
An object with component's settings. See "Theme components" section below for details. |
You can pass custom theme objects to ThemeProvider
using theme
property (see
"Variables" section below for code example).
Like popular CSS preprocessors, React Chat UI Kit supports variables. It
means that you can first define custom properties in vars
section, and then
reuse them throughout your theme. To refer to a variable, use its property key
preceded by -- and wrapped in a var function. For example, if your variable's property key is primary-color, you will use it as follows: var(--primary-color)
.
You can read more about CSS variables here.
In the example below, primary-color
, secondary-color
, tertiary-color
and
avatar-border-color
are variables:
const theme = { vars: { 'primary-color': '#427fe1', 'secondary-color':
'#fbfbfb', 'tertiary-color': '#fff', 'avatar-border-color': 'blue', }, AgentBar:
{ Avatar: { size: '42px', }, css: { backgroundColor: 'var(--secondary-color)',
borderColor: 'var(--avatar-border-color)', } }, Message: { css: { fontWeight:
'bold', }, }, }
Components, or the elements of the LiveChat widget, are the heart of LiveChat UI Kit. Think of them as of building blocks that a chat window is made of: agent bar, avatars, input field, buttons, etc.
You can modify a component by placing its customization object in your theme object. To do so, add a new property to your theme object. This property should consist of component's name and an object as its value.
On the root level of this object, there are component's properties (every
component has its own list of style properties) and a css
property, where you
can place CSS declarations:
{ vars: { 'primary-color': 'red', }, Avatar: { size: '40px', // special Avatar's
property, supported by this component css: { // css object with any CSS
properties borderColor: 'blue', }, }, TextComposer: { css: { 'color': '#000', },
}, }
You can also customize components placed inside other components. For example:
"Set the size of any avatar to 30px and set the border color to blue, but only
Avatars
placed inside AgentBar
components should have a 1px red border and green
background". To do this, add Avatar
section inside AgentBar
with proper
customization:
{ Avatar: { size: '40px', // special Avatar's property, supported by this
component css: { // css object with any CSS properties borderColor: 'blue', },
}, AgentBar: { Avatar: { css: { // you can place there any CSS properties
border: '1px solid red', backgroundColor: 'green', } }, }, }
Subscribe to LiveChat Developers Newsletter to be notified about changes in React Chat UI Kit.
Use CSS variables syntax in themes instead of custom syntax
Fix onScroll MessageList callback
Fix onSeen message callback
Fix library peer dependencies, docs improvements
First public release