Skip to main content

React Integration

Managed UI React components run inside the generated UI DI container. In the ClipVault example, React components resolve HexaUIClient or tokens directly with inject(...) inside effects and event handlers.

Request data in an effect​

import { inject } from '@hexajs-dev/common';
import { HexaUIClient } from '@hexajs-dev/ui';
import { configApi } from './api';
import { ConfigResponseMessage, GetConfigMessage } from './messages';

useEffect(() => {
  const load = async () => {
    const hexaUIClient = inject(HexaUIClient);
    const response = await hexaUIClient.sendMessage<GetConfigMessage, ConfigResponseMessage>(
      configApi.Get,
      new GetConfigMessage(Date.now())
    );

    if (response && !hasHexaError(response) && response.config) {
      setConfig(response.config);
    }
  };

  void load();
}, []);

Send changes from an event handler​

import { inject } from '@hexajs-dev/common';
import { HexaUIClient } from '@hexajs-dev/ui';
import { configApi } from './api';
import { ConfigResponseMessage, UpdateConfigMessage } from './messages';

const hexaUIClient = inject(HexaUIClient);

await hexaUIClient.sendMessage<UpdateConfigMessage, ConfigResponseMessage>(
  configApi.Update,
  new UpdateConfigMessage({ theme: nextTheme })
);

Resolve token values​

import { HEXA_PLATFORM, inject } from '@hexajs-dev/common';

const platform = inject(HEXA_PLATFORM);
return <span>{platform}</span>;

Important scope reminder​

Managed UI React components resolve UI/general services and tokens. They do not resolve Background/Content store instances directly.

Classes​

HexaUIClient​

UI-context HexaClient. Sends messages from popup/devtools UI to the background.

import { HexaUIClient } from '@hexajs-dev/ui';
class HexaUIClient { ... }

Methods​

sendMessage()

Send a message and await a response. Content → background uses runtime.sendMessage. Background → content requires a tabId — use BackgroundHexaClient.sendToTab().

sendMessage<TPayload, TResponse>(target: `${namespace}:${api}`, payload?: TPayload): Promise<TResponse>