1. Reference
2. UIKit
3. Context

Context component

<wy-context> | WyContext

The Weavy context component provides a declarative way of initializing the Weavy UIKit that does not require creating an instance of the Weavy class. This can be useful in some scenarios, for instance in low-code and no-code platforms with limited javascript functionality.

When used with child nodes, the Weavy context acts a regular context provider, which makes the configuration available to it's child nodes only. If no child nodes are present, the configuration is instead available globally in the DOM.

To use the context component in the UIKit you need initialize it with the url to your environment and tokenFactory/tokenUrl for authentication.

For use with React, you can instead use the standard React context provider or the useWeavy configuration hook, available in the @weavy/uikit-react package. See Getting started with Weavy using React on how to configure Weavy in React.

Component layout

This component does not render or occupy any visual space in the rendering.

You can add additional styling for other child Weavy components using CSS Custom Properties.

Importing

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

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

Examples

Globally available Weavy context

The context component is place by itself without any children and becomes available to the entire DOM.

It's configured with a tokenUrl endpoint that needs to be implemented and provided at your server.

<wy-context
  url="{WEAVY-URL}"
  tokenUrl="https://example.com/myapp/token"
></wy-context>
...
<h1>Messenger with standard weavy configuration</h1>
<wy-messenger></wy-messenger>

Scoped Weavy context provider

Placing components as children to the context makes the configuration only available to it's children.

It's configured with a tokenUrl endpoint that needs to be implemented and provided at your server.

<wy-context url="{WEAVY-URL}" tokenUrl="https://example.com/myapp/token">
  <h1>Messenger inside a weavy context provider</h1>
  <wy-messenger></wy-messenger>
</wy-context>

HTML attributes

Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.

Most attributes 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 (**).

Learn more about attributes and properties.

JavaScript properties

Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable. Any required attributes are indicated with an asterisk (*). Any multiple option requirements are marked by double asterisks (**).