@weavy/uikit-react

React components based UIKit for Weavy powered by @weavy/uikit-web web components under the hood. It comes with regular React components for Weavy Blocks and React hooks for simplified configuration and usage.

See UIKit React documentation.

Installation

npm install @weavy/uikit-react

Getting started

You need a Weavy server in order to test any of the frontend examples. If you don't have one, you can create one for free after signing up for an account on get.weavy.com.

You also need an application with a user system and a token endpoint. See Weavy Authentication for more info about configuring authentication and single sign-on between your application and Weavy.

Weavy docs

Use Weavy React Components

To use any block you must first configure Weavy with an url and a tokenUrl or tokenFactory. This can be done using the useWeavy hook or alternatively use the <WyContext /> provider.

import { useWeavy, WyMessenger } from "@weavy/uikit-react";

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

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

Run the React components demo in developer mode

The developer mode compiles and starts up a developer server that also provides authentication for a single developer user.

.env

You must provide an .env file with your WEAVY_URL and WEAVY_APIKEY to run the development test server. See the .env.example for an example configuration.

WEAVY_URL="https://mysite.weavy.io"
WEAVY_APIKEY=""

Dev server

Once you have configured you .env you can start up the auth server and dev server. The dev server runs in watch mode.

npm install
npm start