1. Reference
  2. UIKit React

UIKit React

UIKit React is a library that you can add to your new or existing React application. The UIKit uses the Web API to communicate with the Weavy environment and is composed of various UI components for the Weavy apps.

Installation

Install UIKit React from npm (you can also clone the open-source weavy-uikit-react repo and build it yourself).

npm install @weavy/uikit-react

Usage

Now you want to add components from the @weavy/uikit-react library to your React app. In the exemple below we add a <Chat> component that renders a fully functional group chat.

Add components

In your app.tsx or wherever you like, add the following (note that that chat component must be wrapped in a <WeavyProvider> element).

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

const weavyClient = new WeavyClient({ 
   url: "{WEAVY-SERVER}", 
   tokenFactory: async (refresh) => "{ACCESS-TOKEN}"
});

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

export default App;

Also import the weavy styles to your root app component.

import "@weavy/uikit-react/dist/css/weavy.css";

Configure authentication

Next step is to configure authentication. In this quickstart, we simply call the Weavy API with curl on the command line to obtain an access_token, but in a real world scenario you should follow the steps in the authentication article for implementing a proper tokenFactory function.

curl https://{WEAVY-SERVER}/api/users/demouser/tokens -H "Authorization: Bearer {API_KEY}" --json "{ 'name': 'Demo User', 'expires_in': 7200}"

Replace the {WEAVY-SERVER} and {API-KEY} placeholders with the url and API key to your environment . The request above will return an user access token for a user with the unique id demouser (if the user doesn't exist in the Weavy environment, the user is created).

In the React code snippet above, replace {WEAVY-SERVER} with the url to your Weavy account environment and {ACCESS_TOKEN} with the token you got in response to the Weavy API request above.

Init app

Before the chat component can be loaded in your application, a corresponding Weavy app must be initialized in your Weavy environment. This is normally done from your backend code with a server-to-server request using an API key, but in this quickstart we show you how to initialize the app on your command line using curl.

curl https://{WEAVY-SERVER}/api/apps/init -H "Authorization: Bearer {API-KEY}" --json "{ app: { uid: 'demochat', name: 'Demo chat', type: 'chat' }, user: { uid: 'demouser' } }"

Example of initializing an app with the Weavy API. This request creates the app if needed and also adds the demouser as a member of the app.

Once the initialization has been done, the Chat component with uid demochat can be loaded and used by React.

Done

Start your React app. You should see the Weavy Chat component rendering the demochat group chat.

Weavy Docs