1. Frameworks
2. React

Using Weavy with React

We offer an UIKit for React with versions of all our building blocks to provide an idiomatic experience for React users. Under the hood, it is powered by UIKit Web for automatic access to all the latest features and updates.

Prerequisites

• A Weavy environment.
• An endpoint in your backend that can provide a JSON response with an access_token for your authenticated user.
• React v16 or later.

Configure your React project

First of all a React project is needed to place Weavy in. If a project already is configured with React this step can be skipped. Otherwise we recommend following the official React installation guide as there are several great frameworks and setups to choose from when setting up a React project. Weavy both support regular React projects as well as server rendered projects (SSR), such as Next.js using React Server Components.

Install UIKit React

Please refer to uikit-react migration guide if you are upgrading from a previous version of UIKit React.

Weavy comes with a dedicated UIKit for React that has regular React components together with some additional React hooks for easy configuration and usage. The React components are based on UIKit Web and can leverage all the functionality found there.

npm install @weavy/uikit-react

Configure Weavy

Similar to UIKit Web, Weavy needs to be configured with the url to an environment and a tokenUrl or tokenFactory to configure authentication. All other configuration options in UIKit Web are also available in UIKit React.

Weavy can be configured in client side React components using a hook or server side using the <WyContext /> component. Simply import the useWeavy hook from the @weavy/uikit-react package and pass your configuration to the hook as options. After the useWeavy hook has initialized, it returns the Weavy instance.

Hooks are not available when using Server Side Rendering (SSR) with React Server Components. To configure Weavy in server components, use the <WyContext /> component instead. Configuration for the tokenFactory can be provided using a server action which runs directly on the server. The <WyContext /> component may alternatively be used with configuration properties in JSX instead of using the useWeavy hook.

We recommend placing the configuration in a component at the highest level possible in the render-tree. Having the configuration in multiple places may cause unexpected conflicting behavior.

import { useWeavy } from "@weavy/uikit-react";
import { SomeComponent } from "./SomeComponent";

export function App() {
  const weavy = useWeavy({
    url: "https://myenvironment.weavy.io",
    tokenUrl: "https://myserver.test/api/token",
  });

  return (
    <>
      ...
      <SomeComponent />
    </>
  );
}

import React from "react";
import { WyContext } from "@weavy/uikit-react";

export default function WeavyComponent() {
  return (
    <>
      <WyContext
        url="https://myenvironment.weavy.io"
        tokenFactory={async (refresh) => {
          "use server"
          return "wyu_**********";
        }}
      />
      ...
      <SomeComponent />
    </>
  );
}

Using Weavy React components

All components in UIKit Web are also available in UIKit React as regular React components but with tag names adapted to the React framework, for example <WyChat> and <WyMessenger>. Property binding for attributes in React using prop={value} syntax may be used normally as expected.

import { WyChat } from "@weavy/uikit-react";

export function SomeComponent() {
  const chatUid = "my-chat";

  return <WyChat uid={chatUid} />;
}