Function: useScopedDisplay()

function useScopedDisplay(
  container: ReferencedContainer,
  name: string,
): {
  height: Ref<number>;
  intersecting: Ref<boolean>;
  lg: Ref<boolean>;
  lgAndDown: Ref<boolean>;
  lgAndUp: Ref<boolean>;
  md: Ref<boolean>;
  mdAndDown: Ref<boolean>;
  mdAndUp: Ref<boolean>;
  mobile: Ref<boolean>;
  mobileBreakpoint: Ref<number | DisplayBreakpoint>;
  name: Ref<DisplayBreakpoint>;
  orientation: Ref<"landscape" | "portrait" | "square">;
  platform: Ref<{
    android: boolean;
    chrome: boolean;
    cordova: boolean;
    edge: boolean;
    electron: boolean;
    firefox: boolean;
    ios: boolean;
    linux: boolean;
    mac: boolean;
    opera: boolean;
    ssr: boolean;
    touch: boolean;
    win: boolean;
  }>;
  sm: Ref<boolean>;
  smAndDown: Ref<boolean>;
  smAndUp: Ref<boolean>;
  ssr: boolean;
  thresholds: Ref<{
    lg: number;
    md: number;
    sm: number;
    xl: number;
    xs: number;
    xxl: number;
  }>;
  update: () => void;
  visible: Ref<boolean>;
  width: Ref<number>;
  xl: Ref<boolean>;
  xlAndDown: Ref<boolean>;
  xlAndUp: Ref<boolean>;
  xs: Ref<boolean>;
  xxl: Ref<boolean>;
};

Parameters

Parameter	Type
container	ReferencedContainer
name	string

Returns

{
  height: Ref<number>;
  intersecting: Ref<boolean>;
  lg: Ref<boolean>;
  lgAndDown: Ref<boolean>;
  lgAndUp: Ref<boolean>;
  md: Ref<boolean>;
  mdAndDown: Ref<boolean>;
  mdAndUp: Ref<boolean>;
  mobile: Ref<boolean>;
  mobileBreakpoint: Ref<number | DisplayBreakpoint>;
  name: Ref<DisplayBreakpoint>;
  orientation: Ref<"landscape" | "portrait" | "square">;
  platform: Ref<{
     android: boolean;
     chrome: boolean;
     cordova: boolean;
     edge: boolean;
     electron: boolean;
     firefox: boolean;
     ios: boolean;
     linux: boolean;
     mac: boolean;
     opera: boolean;
     ssr: boolean;
     touch: boolean;
     win: boolean;
  }>;
  sm: Ref<boolean>;
  smAndDown: Ref<boolean>;
  smAndUp: Ref<boolean>;
  ssr: boolean;
  thresholds: Ref<{
     lg: number;
     md: number;
     sm: number;
     xl: number;
     xs: number;
     xxl: number;
  }>;
  update: () => void;
  visible: Ref<boolean>;
  width: Ref<number>;
  xl: Ref<boolean>;
  xlAndDown: Ref<boolean>;
  xlAndUp: Ref<boolean>;
  xs: Ref<boolean>;
  xxl: Ref<boolean>;
}

Name	Type	Default value
height	Ref<number>	-
intersecting	Ref<boolean>	-
lg	Ref<boolean>	-
lgAndDown	Ref<boolean>	-
lgAndUp	Ref<boolean>	-
md	Ref<boolean>	-
mdAndDown	Ref<boolean>	-
mdAndUp	Ref<boolean>	-
mobile	Ref<boolean>	-
mobileBreakpoint	Ref<number | DisplayBreakpoint>	-
name	Ref<DisplayBreakpoint>	-
orientation	Ref<"landscape" | "portrait" | "square">	-
platform	Ref<{ android: boolean; chrome: boolean; cordova: boolean; edge: boolean; electron: boolean; firefox: boolean; ios: boolean; linux: boolean; mac: boolean; opera: boolean; ssr: boolean; touch: boolean; win: boolean; }>	-
sm	Ref<boolean>	-
smAndDown	Ref<boolean>	-
smAndUp	Ref<boolean>	-
ssr	boolean	!!ssr
thresholds	Ref<{ lg: number; md: number; sm: number; xl: number; xs: number; xxl: number; }>	-
update()	() => void	-
visible	Ref<boolean>	-
width	Ref<number>	-
xl	Ref<boolean>	-
xlAndDown	Ref<boolean>	-
xlAndUp	Ref<boolean>	-
xs	Ref<boolean>	-
xxl	Ref<boolean>	-