Browser

Small wrappers over platform APIs. All are SSR-safe (they attach on mount) and tear down on unmount.

Live — resize the box, scroll the page, switch tabs

drag my corner

useResizeObserver

0 × 0

useScroll

y 0 · —

useVisibility

visible

useMedia (min-width: 800px)

false

reduced motion

false

<script setup lang="ts">
import { ref } from "vue";
import { useMedia, useResizeObserver, useScroll, useVisibility } from "blessing-ui";

const box = ref<HTMLElement>();
const { width, height } = useResizeObserver(box);
const { y, direction } = useScroll();
const { visible } = useVisibility();
const wide = useMedia("(min-width: 800px)");
// reducedMotion() reads once when called; for a live ref, the same query through useMedia
const reduce = useMedia("(prefers-reduced-motion: reduce)");
</script>

<template>
  <div class="browser">
    <div ref="box" class="browser__box">drag my corner</div>
    <dl class="browser__out">
      <dt>useResizeObserver</dt>
      <dd>{{ Math.round(width) }} × {{ Math.round(height) }}</dd>
      <dt>useScroll</dt>
      <dd>y {{ Math.round(y) }} · {{ direction ?? "—" }}</dd>
      <dt>useVisibility</dt>
      <dd>{{ visible ? "visible" : "hidden" }}</dd>
      <dt>useMedia (min-width: 800px)</dt>
      <dd>{{ wide }}</dd>
      <dt>reduced motion</dt>
      <dd>{{ reduce }}</dd>
    </dl>
  </div>
</template>

<style scoped>
.browser {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bless-space-6);
  align-items: flex-start;
}
.browser__box {
  display: grid;
  place-items: center;
  width: 200px;
  height: 100px;
  min-width: 120px;
  min-height: 60px;
  max-width: 100%;
  border: var(--bless-border-width) solid var(--bless-color-border);
  font-size: var(--bless-text-xs);
  color: var(--bless-color-text-muted);
  resize: both;
  overflow: hidden;
}
.browser__out {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--bless-space-1) var(--bless-space-4);
  margin: 0;
  font-size: var(--bless-text-sm);
}
.browser__out dt {
  font-family: var(--vp-font-family-mono, monospace);
  color: var(--bless-color-text-muted);
}
.browser__out dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
</style>

import {
  useResizeObserver,
  useFullscreen,
  useVisibility,
  useScroll,
  useLoadingBar,
  useMedia,
  useHash,
  reducedMotion,
  scrollBehavior,
} from "blessing-ui";

const { width, height } = useResizeObserver(el); // the element's box, live
const { active, enter, exit, toggle } = useFullscreen(el?); // document if no el
const { visible } = useVisibility(); // document.visibilityState === "visible"
const { x, y, direction } = useScroll(el?); // window if no el; direction: "up" | "down" | null
const { start, stop, set, track } = useLoadingBar(); // drives BlessLoadingBar; nested start/stop, track(promise)
const matches = useMedia("(min-width: 800px)"); // Ref<boolean>
const hash = useHash(); // Ref<string> of location.hash, two-way — what BlessModal `hash` uses
reducedMotion(); // boolean, read now: did the person ask for less motion?
el.scrollTo({ top: 0, behavior: scrollBehavior() }); // "smooth", or "auto" under reduced motion

useLoadingBar counts: every start() needs a stop(), the bar hides when the count reaches zero; track(promise) wraps both. useScroll's direction is what BlessLayout uses to hide and reveal its header.

useFullscreen().enter() only works from a user action — a click or a key press; browsers refuse fullscreen requested on mount or from a timer.

reducedMotion() reads the setting when you call it — right for a one-off decision before scrolling or starting an animation; for a value that updates live, use useMedia("(prefers-reduced-motion: reduce)"), as the demo does. Both motion helpers exist so your own scripted motion keeps the care rules.