Skip to main content

Trackunit React Providers

TrackunitProviders is a React component exposed by the @trackunit/react-core-contexts package. It wraps all the base React context providers needed to use contexts available in Trackunit Manager, making it possible to use hooks and complex components in your App SDK extension.

Your extension's entry point must import TrackunitProviders and wrap its root component with it — the host runtime does not inject these providers automatically:

src/index.tsx
import { TrackunitProviders } from "@trackunit/react-core-contexts";
import { translations } from "./translation";
import { App } from "./app";

const RootComponent = () => (
  <TrackunitProviders translations={translations}>
    <App />
  </TrackunitProviders>
);

The generator scaffolds this for you when you create a new app or extension — see Creating a New Extension.

The provider also wraps the CSS-based theming provider, which injects the host's theme as CSS custom properties and is required for our React components to render correctly.

The following hooks from @trackunit/react-core-hooks can be used inside the provider:

  • useToken Hook: This hook will retrieve an access token.
  • useCurrentUser Hook: This hook will retrieve data on the current user.
  • useEnvironment Hook: This hook will read the current environment.
  • useUserSubscription Hook: This hook will retrieve the user's subscription package and features.
  • useHasAccessTo Hook: This hook will check if the user has access to a specific page.
  • useNavigateInHost Hook: This hook will allow you to navigate to another page in the host.
  • useFilterBarContext Hook: This hook will allow you to get the current filter bar context if filter is available on the page in the host.
  • useSiteRuntime Hook: This hook will allow you to get the current site information if available on the page in the host.
  • useAssetRuntime Hook: This hook will allow you to get the current asset information if available on the page in the host.
  • useCustomerRuntime Hook: This hook will allow you to get the current customer information if available on the page in the host.
  • useEventRuntime Hook: This hook will allow you to get the current event information if available on the page in the host.
  • useToast Hook: This hook will allow you to show a toast message in the host.
  • useCurrentUserPreference Hook: This hook will allow you to read and update the current user's preferences.