UIContext

Custom components often need to access the application context to run commands and operations, subscribe and publish to events, and more. A component has two ways of accessing the application context.

First, every component has a model which in turn has a messages property that can be used to access commands, operations, and events. All application level interactions should be facilitated by the model.

Optionally, a component can use the UIContext to access commands, operations and events, as well as use the translate function to take advantage of our internationalization features.

Accessing the UIContext#

The UIContext is injected into a component with the React useContext hook.

import { UIContext } from "@vertigis/web/ui";
import { useContext } from "react";
export default function CustomComponent(props) {
const { command, event, operation, translate, hostElement } = useContext(
UIContext
);
// ...
}

Once you have reference to the UIContext, you can access its properties and interact with the application context in your custom component.

hostElement#

The UIContext provides access to the DOM through the hostElement property. However, this is meant to be a last resort, intended for enabling complex third party libraries. The DOM should only be interacted with through the abstraction of React components whenever possible.