Overview

​

Overview

The React UI Kit is a collection of elegant React components backed by the JavaScript SDK. These components empower engineers to build an immersive chat environment.

​

How to use these docs

In the navigation, you’ll find various components exported by the UI Kit. Each component falls into one of two categories:

• Data aware: These components manage data, including fetching, creating, and deleting data within the component. All of this functionality is already handled.
• NOT data aware: These components are purely UI-based. While they are often used within data-aware components, we’ve exported them separately for your convenience.

​

Get started

​

Install the UI Kit

​

Add to your project

To utilize the SDK and its data storage and API layer, wrap your chat-related code with BotStacksChatProvider. It’s best to place this provider near the root of your component tree.

Here’s a simple example:

import { BotStacksChatProvider } from '@botstacks/chat-react';

export const App = () => (
  <BotStacksChatProvider apiKey={API_KEY}>
    <div>The rest of your app goes here...</div>
    <>
      <div>Any UIKit components in here will be able to use the store.</div>
      <ChannelsView />
    <>
  </BotStacksChatProvider>
);

​

Accessing data

The React UI Kit extends the JavaScript SDK to create and set up the store automatically within the BotStacksChatProvider. To enable your custom components to be reactive and data aware, you only need to wrap your components with observer.

This allows your components to interact with the store:

import { observer } from 'mobx-react-lite';
import { useChat } from '@botstacks/chat-react';

export const MyCustomChatComponent = observer(() => {
  const chat = useChat();

  ...
});

​

Quickstart

If you want to use our feature-complete UI, including routing or just simply want to give it a test run, you can use the BotStacksChatUI component.

Here is a full example, using a hardcoded user to log in:

import React, { useEffect } from "react";
import {
  BotStacksChatProvider,
  BotStacksChatUI,
  useChat,
} from "@botstacks/chat-react";

const me = {
  user_id: "1",
  username: "luna.lovegood",
  email: "lunalovegood@hogwartz.co.uk",
  display_name: "Luna Lovegood",
};

const Chat = () => {
  const chat = useChat();
  useEffect(() => {
    chat.login(me);
  });

  return (
    <BotStacksChatUI
      onLogout={() => {
        chat.logout();
      }}
    />
  );
};

export const App = () => {
  return (
    <BotStacksChatProvider apiKey={API_KEY}>
      <Chat />
    </BotStacksChatProvider>
  );
};

​

Resources