Skip to content

weavy/weavy-uikit-react

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

@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.

Documentation

To learn more about all the different components that you can use and how to setup the authentication flow, head over to our Documentation site