Hello React UI kit

This example shows how to add the <Messenger> component to your React app. The <Messenger> is a component that combines some of the other UI kit components that is exposed by the @weavy/uikit-react library. These components (<Conversation> and <ConversationList>) can also be used separately and a full list of the available components can be found here.

Let's start by installing all the necessary libraries.

npm install @weavy/uikit-react @weavy/themes

Adding the <Messenger> component

In your app.tsx or wherever you would like to add the Weavy Messenger:

import React from 'react';
import { WeavyClient, WeavyProvider, Messenger } from '@weavy/uikit-react';

const getToken = () => {
   return new Promise(function (resolve, reject) {
       // typically an api call to your backend which returns a JWT
       var token = getTokenFromSomewhere();
       if (token) {
           resolve(token);
       } else {
           reject("Failed to retrieve token");
       }
   });
}

const weavyClient = new WeavyClient({ url: "https://url-to-weavy.backend", tokenFactory: getToken})

function App() {
   return (
       <div className="App">
           <WeavyProvider client={weavyClient}>
               <Messenger />
           </WeavyProvider>
       </div>
   )
}

export default App;

Add the stylesheet

In your index.tsx (or index.js if you are not using TypeScript) file, add the following. If your build environment doesn't support css imports from code, please refer to styling to include the styles in other ways.

// ---------------------------------------------------------
// add the following code line
// ---------------------------------------------------------
import "@weavy/themes/dist/weavy-default.css";  
// ---------------------------------------------------------

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<App />);

Run the app

Start your React app. You should see the Weavy Messenger component rendering a Conversation list and a Conversation with the currently selected conversation.

Weavy Docs