runme: id: 01HT1FJ3W14M9QJN0KFMZ0JS1F version: v3

Quick Links

With our component library, you can build a variety of chat use cases, including:

• Livestream like Twitch or YouTube
• In-game chat like Overwatch or Fortnite
• Team-style chat like Slack
• Messaging-style chat like WhatsApp or Facebook's Messenger
• Customer support chat like Drift or Intercom

Installation

Install with NPM

npm install react react-dom belo-js-sdk belo-react-sdk

Install with Yarn

yarn add react react-dom belo-js-sdk belo-react-sdk

Install via CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/belo-js-sdk"></script>
<script src="https://cdn.jsdelivr.net/npm/belo-react-sdk"></script>

Component Reusability

For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the Message UI component with MessageTeam, without affecting any logic in the app.

<Channel Message={MessageTeam}>
  <Window>
    <ChannelHeader />
    <MessageList />
    <MessageInput />
  </Window>
  <Thread />
</Channel>

Customizing Styles

The preferred method for overriding the pre-defined styles in the library is to two step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:

import 'belo-react-sdk/dist/css/v2/index.css';
import './App.css';