Skip to main content

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.