​
Install the UIKit

​
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 this:

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

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

Make sure you only have one BotStacksChatProvider. Having multiple may yield unexpected results.

​
Accessing data

The React UI Kit 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, thus granting you access 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>
  );
};

Was this page helpful?

OverviewCustomization