@spgandhi/weavy-uikit-react NPM

@weavy/uikit-react

React based UI kit for Weavy.

Installation

npm install @weavy/uikit-react

Minimum requirements

React >= 18.0.0
Weavy Backend >= 11.0.0

Gettting started

Make sure you have a Weavy backend up and running in order to test any of the frontend examples. To quickly get a backend up and running you can register for a free account on get.weavy.io. That is the easiest and quickest way to get started and does not require you to deploy your own backend.

The React UI kit is dependant of the theme library that are shared by all our ui kits.

In your project directory, run:

npm install @weavy/themes

The Weavy UI kit components that you decide to use must be wrapped in the WeavyProvider component. The WeavyProvider handles all the common functionality for all the Weavy React UI components.

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

export default function App() {
   return (        
       <WeavyProvider>
           <!-- Weavy components goes here -->
       </WeavyProvider>        
   )
}

Adding the `Messenger` component

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

If you registered for a free account on get.weavy.io, you can use the demo/test JWT token generated for you and use it in the getToken below and just return it as a string. But in a real application, this is typically fetched from a backend enpoint or similar that returns a valid JWT for your currently signed in user.

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

// ---------------------------------------------------------
// add the following line of code
// ---------------------------------------------------------
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.