Monitoring, refs and fullscreen

Monitoring ownership

DataMonitorService and singleton dataMonitorService poll a count URL with a legacy Condition as POST JSON. enable(viewId, countUrl, viewName, condition, notification, interval = 30000) replaces that view's timer, fetches immediately and persists configuration under view:dataMonitor. The first count becomes a baseline; any later unequal count, including a decrease, publishes DATA_CHANGED and attempts a browser notification. Failures are logged. There is no guarantee that overlapping polls are serialized or response-ordered. disable(viewId) removes timer/configuration but does not abort already dispatched HTTP I/O. initialize() restores enabled configurations with the default interval; custom intervals are not persisted.

useDataMonitor returns isEnabled, enable/disable/toggle. Condition and notification changes update an enabled service entry. Unmount disables the currently tracked view ID; changing viewId itself does not automatically disable the old entry. Keep one lifecycle owner per view ID and explicitly disable the old ID when migrating ownership. Changes to countUrl/viewName/interval require enabling again. useDataMonitorEventBus exposes manual named subscribe/unsubscribe with no automatic cleanup; pair them in an effect. dataMonitorEventBus.emit returns Promise<void>. Notification channel registration is internal and is not a root-importable API.

Utilities

API	Return and lifecycle
useLatest(value)	RefObject updated every render; no rerender notification.
useMounted()	Stable function reporting effect-mounted state; false before mount/after cleanup.
useForceUpdate()	Callback forcing a render with a reducer increment.
useRequestId()	Counter initially 0; generate/invalidate increment, current reads, isLatest compares, reset sets 0. No cancellation by itself.
useRefs<T>()	Map-like register/get/set/delete/has/clear/size/iteration. register returns a ref callback; null removes a key. Clears on unmount, mutations do not trigger renders.

Fullscreen

useFullscreen({ target? } = {}) returns fullscreen/getTarget/enter/exit/toggle. Target priority is a dynamically supplied element, target.current, then document.documentElement. Null resets the dynamic override; undefined keeps it. FullscreenProvider creates a wrapper div when target is absent; useFullscreenContext() returns undefined outside it. The hook tracks document fullscreen-change events and removes listeners on cleanup; it does not automatically exit fullscreen on unmount. DOM utilities require a browser and native fullscreen permission/user activation. Unsupported entry/exit APIs throw; enter/exit/toggle return rejecting Promise<void>. Manual addFullscreenChangeListener must be paired with removeFullscreenChangeListener using the same callback.

Complete example

import {
  FullscreenProvider,
  useFullscreenContext,
} from '@ahoo-wang/fetcher-react';
function Toggle() {
  const fullscreen = useFullscreenContext();
  return (
    <button
      onClick={() => {
        void fullscreen?.toggle().catch(console.error);
      }}
    >
      Toggle fullscreen
    </button>
  );
}
export function Presentation() {
  return (
    <FullscreenProvider>
      <Toggle />
      <p>Content</p>
    </FullscreenProvider>
  );
}

Public signatures and types

These signatures follow declarations reachable from the current root entry. ? marks optional input; generics/interfaces only constrain compile-time types. Locate inherited and related types through the symbol index. Runtime defaults and failure behavior are described above.

useFullscreen

export function useFullscreen(
  options?: UseFullscreenOptions,
): UseFullscreenReturn;

Implementation defaults: options = {}.

packages/react/src/core/fullscreen/useFullscreen.ts:60

UseFullscreenOptions

export interface UseFullscreenOptions {
  target?: RefObject<HTMLElement | null>;
}

packages/react/src/core/fullscreen/useFullscreen.ts:24

UseFullscreenReturn

export interface UseFullscreenReturn {
  fullscreen: boolean;
  getTarget: () => HTMLElement;
  toggle: (target?: HTMLElement | null) => Promise<void>;
  enter: (target?: HTMLElement | null) => Promise<void>;
  exit: () => Promise<void>;
}

packages/react/src/core/fullscreen/useFullscreen.ts:31

FullscreenProvider

export function FullscreenProvider(
  props: FullscreenProviderProps,
): import('react').JSX.Element;

packages/react/src/core/fullscreen/FullscreenContext.tsx:32

useFullscreenContext

export function useFullscreenContext(): FullscreenContextValue | undefined;

packages/react/src/core/fullscreen/FullscreenContext.tsx:44

FullscreenContextValue

export type FullscreenContextValue = UseFullscreenReturn;

packages/react/src/core/fullscreen/FullscreenContext.tsx:22

FullscreenContext

declare const FullscreenContext: import('react').Context<
  UseFullscreenReturn | undefined
>;

packages/react/src/core/fullscreen/FullscreenContext.tsx:24

FullscreenProviderProps

export interface FullscreenProviderProps extends UseFullscreenOptions {
  children: ReactNode;
}

packages/react/src/core/fullscreen/FullscreenContext.tsx:28

getFullscreenElement

export function getFullscreenElement(): HTMLElement | null;

packages/react/src/core/fullscreen/utils.ts:18

isFullscreen

export function isFullscreen(): boolean;

packages/react/src/core/fullscreen/utils.ts:27

enterFullscreen

export function enterFullscreen(element: HTMLElement): Promise<void>;

packages/react/src/core/fullscreen/utils.ts:36

exitFullscreen

export function exitFullscreen(): Promise<void>;

packages/react/src/core/fullscreen/utils.ts:59

addFullscreenChangeListener

export function addFullscreenChangeListener(callback: () => void): void;

packages/react/src/core/fullscreen/utils.ts:82

removeFullscreenChangeListener

export function removeFullscreenChangeListener(callback: () => void): void;

packages/react/src/core/fullscreen/utils.ts:93

useRequestId

export function useRequestId(): UseRequestIdReturn;

packages/react/src/core/useRequestId.ts:71

UseRequestIdReturn

export interface UseRequestIdReturn {
  generate: () => number;
  current: () => number;
  isLatest: (requestId: number) => boolean;
  invalidate: () => void;
  reset: () => void;
}

packages/react/src/core/useRequestId.ts:19

useLatest

export function useLatest<T>(value: T): RefObject<T>;

packages/react/src/core/useLatest.ts:47

useMounted

export function useMounted(): () => boolean;

packages/react/src/core/useMounted.ts:40

useRefs

export function useRefs<T>(): UseRefsReturn<T>;

packages/react/src/core/useRefs.ts:53

UseRefsReturn

export interface UseRefsReturn<T> extends Iterable<[Key, T]> {
  register: (key: Key) => (instance: T | null) => void;
  get: (key: Key) => T | undefined;
  set: (key: Key, value: T) => void;
  delete: (key: Key) => boolean;
  has: (key: Key) => boolean;
  clear: () => void;
  readonly size: number;
  keys: () => IterableIterator<Key>;
  values: () => IterableIterator<T>;
  entries: () => IterableIterator<[Key, T]>;
}

packages/react/src/core/useRefs.ts:21

useForceUpdate

export function useForceUpdate(): () => void;

packages/react/src/core/useForceUpdate.ts:45

DataMonitorNotificationConfig

export interface DataMonitorNotificationConfig {
  title: string;
  navigationUrl?: string;
}

packages/react/src/dataMonitor/DataMonitorService.ts:20

DataMonitorService

export class DataMonitorService {
  initialize(): void;
  enable(
    viewId: string,
    countUrl: string,
    viewName: string,
    condition: Condition,
    notification: DataMonitorNotificationConfig,
    interval: number = 30000,
  ): void;
  disable(viewId: string): void;
  updateCondition(viewId: string, condition: Condition): void;
  updateNotification(
    viewId: string,
    notification: DataMonitorNotificationConfig,
  ): void;
  isEnabled(viewId: string): boolean;
}

packages/react/src/dataMonitor/DataMonitorService.ts:45

dataMonitorService

declare const dataMonitorService: DataMonitorService;

packages/react/src/dataMonitor/DataMonitorService.ts:217

useDataMonitor

export function useDataMonitor(
  options: UseDataMonitorOptions,
): UseDataMonitorReturn;

packages/react/src/dataMonitor/useDataMonitor.ts:25

UseDataMonitorOptions

export interface UseDataMonitorOptions {
  viewId: string;
  countUrl: string;
  viewName: string;
  condition: Condition;
  notification: DataMonitorNotificationConfig;
  interval?: number;
}

packages/react/src/dataMonitor/useDataMonitor.ts:9

UseDataMonitorReturn

export interface UseDataMonitorReturn {
  isEnabled: boolean;
  enable: () => void;
  disable: () => void;
  toggle: () => void;
}

packages/react/src/dataMonitor/useDataMonitor.ts:18

useDataMonitorEventBus

export function useDataMonitorEventBus(): UseDataMonitorEventBusReturn;

packages/react/src/dataMonitor/useDataMonitorEventBus.ts:28

DataChangedEvent

export interface DataChangedEvent {
  type: 'DATA_CHANGED';
  viewId: string;
  viewName: string;
  previousTotal: number | null;
  currentTotal: number;
}

packages/react/src/dataMonitor/useDataMonitorEventBus.ts:10

UseDataMonitorEventBusReturn

export interface UseDataMonitorEventBusReturn {
  subscribe: (handler: EventHandler<DataChangedEvent>) => boolean;
  unsubscribe: (handlerName: string) => boolean;
}

packages/react/src/dataMonitor/useDataMonitorEventBus.ts:18

dataMonitorEventBus

declare const dataMonitorEventBus: {
  emit: (event: DataChangedEvent) => Promise<void>;
};

packages/react/src/dataMonitor/useDataMonitorEventBus.ts:44

Related topics

Fetcher hooks · Promise and query state · API hook factories · Debounced execution · Storage and event subscriptions · Security hooks and route guards · Wow query hooks