1. Reference
2. UIKit React
3. Components

Components

The following components are available in the UIKit React:

Provider components

The <WeavyProvider> and <MessengerProvider> components are wrapper components that takes care of common and Messenger functionality respectively. When using the <Messenger> component, this component already wraps the <MessengerProvider> so no need to add that separately.

import { WeavyProvider, MessengerProvider } from "@weavy/uikit-react";

When you use the individual <ConversationList>, <Conversation> components, you must wrap these in both the <WeavyProvider> and <MessengerProvider> components.

<WeavyProvider client={weavyClient}>
    <Messenger />
</WeavyProvider>

Example: When using the Messenger component.

<WeavyProvider client={weavyClient}>
    <MessengerProvider>
        <ConversastionList />
        <Conversastion />
    </MessengerProvider>
</WeavyProvider>

Example: When using the individual components.

<WeavyProvider client={weavyClient}>    
    <Chat uid="my_chat" />            
</WeavyProvider>

Example: When using the individual Chat component. No need for MessengerProvider here

<WeavyProvider client={weavyClient}>    
    <Posts uid="my_feed" />            
</WeavyProvider>

Example: When using the Posts component.

Contextual and non-contextual components

The difference between these two similar components are:

• The <Conversation> component is non-contextual and is used to render a Private Chat or a Chat Room. A Private Chat is a one-to-one chat and a Chat Room is multi user chat where users are invited.
• The <Chat> component is used to render a contextual chat. These are often connected to a specific entity, for example a specific product page or similar. Every user that is a member of the Contextual chat can post and read messages.
• The <Posts> component is contextual. These are often connected to a specific entity, for example a specific product page or similar. Every user that is a member of the post component can create posts and comments.
• The <Files> component is contextual. These are often connected to a specific entity, for example a specific product page or similar. Every user that is a member of the files component can upload files and post comments.

Contextual components needs to be created and the user needs to be a member of the app before it can be loaded using our frontend libraries. You can use the Web API to init the app on your server side before loading the contextual app from your frontend.

Example: Execute a single request that creates the app (if it does not already exist) with the given uid identifier. Then the user with the given identifier will be added as a member in that app (if the user is not already a member).

$ curl -H 'Authorization: Bearer {token}' {WEAVY_ENVIRONMENT_URL}/api/apps/init -d '{app: {"uid": "product-chat", "name": "Product Chat", "type": "chat"}, user: {"uid": "johnd"}}'

The request above creates a new Chat app with the unique id 'product-chat'. The user with the user id 'johnd' is added as a member if not already a member. After the request is sent you can load and display the app using your frontend. For example the Chat component:

<WeavyProvider client={weavyClient}>    
    <Chat uid="product-chat" />            
</WeavyProvider>

Example: Contextual Chat component.

Layout

The Weavy components will resize and adapt automatically to a flex layout in the container where they are placed.

The <Messenger> and <Chat> have predefined overflow scroll styles. If you use other UI components to provide a custom messenger you will need to provide overflow scrolling to the container you are placing the component in by adding overflow-y: scroll in your CSS.

WeavyClient

When adding a new <WeavyProvider> component, you must specify a new instance of the WeavyClient class. The WeavyClient is responsible for handling the connection to the Weavy environment.

const getToken = useCallback(async (refresh: boolean) => {  
    // return a generated token from your backend api
    let response = await fetch(`/token?&refresh=${refresh}`);
    let json = await response.json();
    return json.access_token
}, []);

...

const weavyClient = new WeavyClient({ 
    url: "https://example.weavy.io", 
    tokenFactory: getToken
});

...

<WeavyProvider client={weavyClient}>
    ...
</WeavyProvider>

THe constructor expects a WeavyClientOptions with an url to the Weavy environment, and a tokenFactory function returning a token for the user. The user token is used in all communication with the Weavy environment and the Weavy Api.

Files app properties

The files app has properties to set the view and sorting of the file list.

• view = "list" | "grid"
• order = { by: "name" | "size" | "modified_at", descending: boolean }
• trashed = boolean

Example code

This example shows you how you to init and display a Posts component in your React application.

React client code

Example of how to display a Posts component in your React application.

import React, { useState } from 'react';
import { Posts } from '@weavy/uikit-react';
import { useEffect } from 'react';

const MyPostsView = () => {

    const [loading, setLoading] = useState(true);;
    const [completed, setCompleted] = useState(false);
    const contextualId = "my-posts";

    useEffect(() => {
        async function setupContextualApp() {
            var response = await fetch(`/contextual/${contextualId}?type=posts`);
            if (response.ok) {
                setCompleted(true);
            }
            setLoading(false);
        }
        setupContextualApp();
    }, [])

    if (loading) return <div>Loading contextual posts app...</div>

    return (
        <>
            {completed &&
                <div style=>
                    <div style=>
                        <Posts uid={contextualId} />
                    </div>
                </div>
            }
        </>
    )
}

export default PostsView;

Node server code

Example of how to initialize a contextual app from you Node server code.

...

app.get('/contextual/:id', async (req, res) => {
    // setup contextual app
    let response = await fetch(`${config.get("weavy_environment")}/api/apps/init`, {
        method: 'POST',
        headers: {
            'content-type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({ app: { uid: req.params.id, name: req.params.id, type: req.query.type }, user: { uid: req.session.user } })
    });

    res.end("OK");
});

...