Overview

​

Overview

The React UIKit is a collection of beautiful React components backed by the JavaScript SDK that can help engineers build an immersive chat environment.

​

How to use these docs

In the navigation, you will see many components exported by the UIKit. Some are data aware and some are not. Each component will note which case it is. What that means is:

• Data aware: The component is responsible for managing data. Meaning it fetches/creates/deletes data within the component. It is all already handled.
• NOT data aware: It is a pure UI component. Most often, these component are used within the data aware components, but we exported them for your use.

​

Get started

​

Install the UIKit

npm i @botstacks/chat-react

​

Add to your project

To use the SDK and, therefore, the data storage and api layer, you need to wrap your chat related code with BotStacksChatProvider. It’s simplest to put this near the root of your component tree.

In its simplest form, it should look like below

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 UIKit extends the JavaScript SDK to create and set up the store for you as part of the BotStacksChatProvider. To enable your custom components to be reactive and data aware, you only need to wrap your components with observer. This allows you to be able to 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