useHostMode

useHostMode reports where the app is running. It returns "unknown" while async host detection is still pending, then settles on "host" (embedded in a host container such as Polkadot Desktop or Mobile) or "standalone" (a plain web page). If the container can be detected synchronously the mode is "host" from the very first render, so host-only UI never flashes.

Use this hook when the "unknown" window matters, for example to render a splash instead of prematurely showing standalone-only UI. When a plain boolean is enough, reach for useIsHost instead.

Usage

import { useHostMode } from "@use-truapi/react";

function Shell({ children }: { children: React.ReactNode }) {
  const mode = useHostMode();

  if (mode === "unknown") return <p>Detecting environment…</p>;

  return (
    <>
      {mode === "standalone" && (
        <aside>Open this app in Polkadot Desktop for the full experience.</aside>
      )}
      {children}
    </>
  );
}

<script setup lang="ts">
import { useHostMode } from "@use-truapi/vue";

const mode = useHostMode();
</script>

<template>
  <p v-if="mode === 'unknown'">Detecting environment…</p>
  <template v-else>
    <aside v-if="mode === 'standalone'">
      Open this app in Polkadot Desktop for the full experience.
    </aside>
    <slot />
  </template>
</template>

See also

• useIsHost is the boolean convenience over the same store.
• useTheme also follows host detection.

API reference

React

function useHostMode(): HostMode;

"unknown" until async detection resolves, then "host" | "standalone".

Returns

HostMode

Vue

function useHostMode(): ShallowRef<HostMode>;

"unknown" until async detection resolves, then "host" | "standalone".

Returns

ShallowRef<HostMode>