1. Reference
2. UIKit

Weavy UIKit

Before using any component in the UIKit you need to create an instance of the Weavy class and initialize it with the url to your environment and tokenFactory/tokenUrl for authentication.

Importing

If you installed the UIKit with npm you can use the following snippet to import the Weavy class into your project. Otherwise, if you installed the UIKit as a <script> you can ignore this section.

import { Weavy } from "@weavy/uikit-web";

Examples

In the example below we provide a custom array of emoji for reactions in addition to the required url and tokenUrl properties .

const weavy = new Weavy();
weavy.url = "{WEAVY-URL}";
weavy.tokenUrl = "https://example.com/myapp/token";
weavy.reactions: "👍 ❤️ 😂 😒 😁",

Properties

Most properties are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*). Any multiple option requirements are marked by double asterisks (**).

Methods

The Weavy class exposes the following methods:

fetch()

The fetch() method makes it easy to call the Web API as the authenticated user. It's compatible with the standard Fetch API, but with some restrictions to only support URLs and the HTTP methods supported by the Web API .

Getting data is as simple as specifying the API endpoint and then processing the response. You can also send data to the Web API (unless specified the value of the Content-Type header defaults to application/json).

Example: Get user data for the authenticated user.

async function getCurrentUser() {
  const response = await weavy.fetch("/api/user");
  const user = await response.json();
  return user;
}

Example: Post a message in a chat on behalf of the authenticated user.

async function postChatMessage() {
  const response = await weavy.fetch("/api/apps/test-chat/messages", {
    method: "POST",
    body: JSON.stringify({
      text: "This is a test message"
    })
  })
  const message = await response.json():
  return message;
}

fetchOptions()

You can also use the weavy.fetchOptions({ ...options }) method to get the RequestInit object used by weavy.fetch(), e.g. for use with the standard window.fetch method.

async function getCurrentUser() {
  // Get default fetch options and add the GET http method
  const options = await weavy.fetchOptions({ method: "GET" });

  // Construct a Web API url using the configured weavy environment url
  const url = new URL("/api/user", weavy.url);

  // Use default window.fetch() method instead of weavy.fetch()
  const response = await window.fetch(url, options);
  const user = await response.json();
  return user;
}

reset()

Resetting weavy state and data. This is useful to call if you know that the authenticated user has been changed. It clears the state and data and then refreshes state and data for the current (new) user. Any open components will be updated.

destroy()

When a user signs out from your application you can destroy the Weavy instance to disconnect the user and prevent further usage.

weavy.destroy();
weavy = undefined;