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.